by designify · in Web Design · March 20, 2015

10 Pure CSS3 Animated Loaders and Spinners

Post Views: 108

Have you noticed that recently loaders and spinners are used all over the web? They are used in apps and websites to add a pinch of beauty while the user is waiting the content to be loaded. Using a loader is a great alternative to the boring “Loading…” message.

As you may know, I am a huge lover of CSS3 and I just love playing with it so when I had some free time in my hands, I have decided to play with CSS keyframes and transitions to create a few loaders and spinners.

If you are not familiar with CSS animations, I will try to explain what has to be done so a nice and smooth animation is created. I will take the first loader – the three sqaures transforming into circles as an example of an animation.

For the HTML you just need to add a div with the loader class, in this case it is:

<div class="loader"></div>

And the magic happens in the CSS:

For the main square (the biggest one), I am defining the width and height of it, some additional styles and also the animation itself which includes the timing function which here is ease-in-out, the duration and delay which is 1s and the animation-direction which is alternate. I am also putting an infitine property so the animation will run forever.

.loader {
   width:50px;
   height:50px;
   display:inline-block;
   padding:0px;
   opacity:0.5;
   border:3px solid #09acfd;
   -webkit-animation: loader 1s ease-in-out infinite alternate;
   animation: loader 1s ease-in-out infinite alternate;
}

The other two squares are added with before and after selectors:

.loader:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid #09acfd;
}

.loader:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid #09acfd;
}

The last bit is to add some movement to the squares by using keyframes. To do it so, you should define the keyframes and the movement. I am adding a rotation from 0 to 360 degrees which mean a full spin and a scaling from 1.1 to 0 which makes the squares to disappear. The border radius defined from 0px to 50px makes the squares to become circles while they are scaling down.
That’s it.Sweet and simple.

@keyframes loader {
from {transform: rotate(0deg) scale(1,1);border-radius:0px;}
to {transform: rotate(360deg) scale(0, 0);border-radius:50px;}
}
@-webkit-keyframes loader {
from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;}
to {-webkit-transform: rotate(360deg) scale(0,0 );border-radius:50px;}
}

You can fork me on Codepen and play with the CSS if you want to. I hope you enjoyed this quick tip. You can download all the spinners below.