10 Pure CSS3 Animated Loaders and Spinners

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 {
   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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

See the Pen CSS Loaders and Spinners by Petia (@designify-me) on CodePen.

Download CSS Loaders & Spinners

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *