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 { 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.
See the Pen CSS Loaders and Spinners by Petia (@designify-me) on CodePen.
Download CSS Loaders & Spinners