用徽标替换加载动画

支持
1

How can I replace a generic spinner with a logo?
Here is the CSS code

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

I would like to replace the generic white cube with a logo. Any suggestions?
Thanks

1 个赞
2

Avoid repositioning; you simply need to overwrite the current icon, so add the background-image and the background-size.

.spinner {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    background-image: url("URL-of-your-logo-image-here");
    background-size: 40px 40px;
}
6 个赞
3

Thanks! Let me play with the code and see if can make it work.

The website is lajollacreative.com still a work in progress.

1 个赞
4

我只是想在这里分享一下我们定制的“加载动画”。不过，既然我们是一个 3D 图形社区，我们不得不把它提升到另一个维度 :slight_smile: 请在 https://blenderartists.org/ 上查看。

3 个赞
5

这是另一个：

3 个赞
6

我的加载图标是 GIF 格式，但我很想知道是否有人制作了主题组件来自定义加载 HTML 代码。

1 个赞
7

为了增添一点乐趣，我们决定向社区发起挑战，设计新的加载动画，并计划每月左右更换一次动画。

我们选出的第一个动画代表了 Blender 中的渲染过程：

编辑：哎呀，Meta 系统将上传的 GIF 转换成了 JPG :-/ 点击此处查看原始文件（或访问我们的网站查看实际效果）。

2 个赞
8

这可能会引起进入该主题的人的兴趣：