Replace Spinner with a logo

サポート
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 just 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

I just wanted to chip in here with our custom ‘spinner’. But since we’re a 3D graphics community, we had to take it to another dimension :slight_smile: Check it out on https://blenderartists.org/

「いいね！」 3
5

Here’s another one:

「いいね！」 3
6

My loading icon is a gif, but I’d be interested to know if someone actually made a theme component to customize the loading HTML code.

「いいね！」 1
7

For a bit of extra fun we decided to challenge our community to design new spinners, we’ll change the animation once a month or so.

The first one we selected represents the rendering process in Blender:

Edit: oops, meta converts uploaded gifs to jpg :-/ Click here to see the original (or visit our site to see it in action).

「いいね！」 2
8

That could interest people that come in this topic: