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

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; }

Thanks! Let me play with the code and see if can make it work. The website is lajollacreative.com still a work in progress.

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/

Here’s another one: [image] My 2nd Discourse forum, 2 years after the first one Praise More than 2 years ago, I migrated a very old forum to Discourse. I relate my experience here: Moved from PluXml and phpBB to Wordpress and Discourse, my all-new experience tada This time, I have migrated a vBulletin5 forum. This forum has been the largest unicycling community for 20 years, but contain topics up from 1993 as content from mailing lists and newsgroups were imported a long time ago. So, it contains almost 30 years-old online information about this niche sports, which is a quite uniq…

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.

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: [image] Edit: oops, meta converts uploaded gifs to jpg :-/ Click here to see the original (or visit our site to see it in action).

That could interest people that come in this topic: [image] Customize the loading icon Developers 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 and paste this code: {{#if condition}} {{else}} {{yield}} {{/if}} Replace or fill .my-custom-l…

Replace Spinner with a logo

Product Support

riking (Kane York) September 27, 2020, 12:45pm 5

Here’s another one:

Topic		Replies	Views
Customize the loading icon Developers how-to	7	3380	June 16, 2021
Custom Loading Spinner Component Theme component	18	2956	November 25, 2023
How to use Font Awesome pulse as the loading icon? Product Support	1	440	May 23, 2022
Loading Slider to Spinner Theme component	1	680	October 5, 2023
Found a workable CSS hack to show spinner/loader on slow initial load UX	4	3275	April 4, 2018

Replace Spinner with a logo

Related topics