How to customize or change the loading spinner icon?


(Jonathas Spalding) #1

Is it possible to customize the loading spinner with CSS?


Changing the ajax loader image?
(Jeff Atwood) #2

The loading spinner is CSS, so…


(Jonathas Spalding) #3

Great. So how can we change its color and the icon/img?


(Jonathas Spalding) #4

For those who wants to change it, this is the default:

.spinner {
  margin: 20px auto 20px auto;
  position: relative;
  -webkit-animation: rotate-forever 1s infinite linear;
  animation: rotate-forever 1s infinite linear;
  height: 30px;
  width: 30px;
  border: 4px solid #BD1818;
  border-right-color: transparent;
  border-radius: 50%;
}

Have fun! :grinning:


(Charles Walter) #5

Is there a loading image on mobile? I didn’t see it in my mobile testing. Any thoughts on what would be needed to add this?


(Sam Saffron) #6

Spinners exist on mobile, just like they do on desktop. If you want to change it, go to site customizations in admin, click on “mobile” and enter some custom css.


(Charles Walter) #7

Thanks @Sam. I was thinking about some type of loading image while all the javascript is loading on mobile web for the first load. @codinghorror explained to me that the initial load can take a small bit of time, which is totally acceptable for a quality javascript app. Though, I figure there could be some way to enable this with some custom JS in the head or something.


Can I add a loading image like slack has while the app is loading?
(Kane York) #8

A big part of the load time is loading and parsing the big js bundles, and if it’s spending all its time parsing the JS, we haven’t gotten to the bottom of <head> yet, so it’ll be useless :frowning:


(DJ) #9

What if we wanted to change the HTML for the spinner?

Like instead of

<div class="spinner"></div>

I wanted

<div class="spinner"><div class="something"><div class="somethingelse"></div></div></div>

I’m wanting to do a gaming related spinner for my gaming community. I know it’s not a big deal since you won’t see it much at all, especially on faster devices, but it’s a little detail I would like to be able to change and I just don’t even know where to begin to do that.


(Joe Fedric) #10

Here’s how I modified the spinner on my own forum:


If anyone wants to replicate the breathing effect, and remove the default spinner, here’s what I did:

CSS
.spinner{
    margin: 20px auto 20px auto;
  position: relative;
  -webkit-animation: breathing 2s infinite ease;
  animation: breathing 2s infinite ease;
  height: 90px; //Modify to the size of your icon
  width: 90px; //Modify to the size of your icon
  background:url("[Your_URL_Here]");
  border: none; //Remove Border
  border-radius:0; //Remove rounding
}
//Breathing animation
@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
</code>

This thread is over a year old, so I figured I would contribute my recent development on the spinner :stuck_out_tongue:


(Nam Nguyen) #11

I found some css codes of keyframe loading for references

http://www.webdesigncrowd.com/demo/loading-animation-11.18.13/