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 Like
dax
(Daniela)
June 11, 2019, 8:18am
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 Likes
kmdonovan1
(Kevin Donovan)
June 11, 2019, 4:35pm
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 Like
bartv
(Bart )
September 27, 2020, 12:40pm
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 Check it out on https://blenderartists.org/
3 Likes
Canapin
(Coin-coin le Canapin)
September 27, 2020, 12:58pm
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 Like
bartv
(Bart )
October 25, 2020, 9:59am
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 Likes
Canapin
(Coin-coin le Canapin)
October 25, 2020, 10:19am
8
That could interest people that come in this topic:
Customize the loading icon
Note that it changes the main loading icon, but not the small loading icon (composer, search menu, etc).
Edit your current theme or create a new theme component.
Go in </head> and paste this code:
<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">
<div class="my-custom-loader">
</div>
</div>
{{else}}
{{yield}}
{{/if}}
</script>
Replace or fill .my-custom-…