Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

Design a cool preloading spinner without using images or javascript

Difficulty: 30 / 50 Tweet

Because IE 6, 7, 8 and even 9 have become bad memories instead of daily nightmares, present day web developers are no longer shy in implementing new technologies for their customers.

Lately I have decided to completely discard preloading GIFs and even JavaScript animations that have the same effect. What I will show you in this css tutorial is a way of displaying preloaders to the user with HTML and CSS only.

Basically what we will do is create a dotted circle from a div that has a large border-radius and a thick dotted border which then will be endlessly rotated through CSS keyframes. Here's the really simple code:

  
    <!-- THIS IS THE CSS -->
    <style>
      .preloader 
      {
        width: 30px;
        height: 30px;
        margin: auto;
        display: block;
        background: none;
        border-radius: 500px;
        border: 2px dotted #0066CC;
        -moz-border-left-colors: #FFF;
        -moz-border-right-colors: #FFF;
        /*Each rotation takes 3 seconds and our div will rotate infinitely*/
        -ms-animation: doarotation linear 3s infinite;
        -webkit-animation: doarotation linear 3s infinite;
        animation: doarotation linear 3s infinite;
      }

      <!-- Here is where we actually define the rotation -->
      @-ms-keyframes doarotation { from { -ms-transform:rotate(0deg); } to { -ms-transform:rotate(360deg); } }
      @-webkit-keyframes doarotation { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
      @keyframes doarotation { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
    </style>
    <!-- AND THIS IS THE HTML -->
    <div class="preloader"></div>
  

In case you need explanations regarding the above code, you should know that @keyframes are used to create custom animations. What they do is they gradually change the CSS property of an HTML element by applying to it all the values that start with the "from" property and end with the "to" property. In our case, the div will be rotated gradually from 0 degrees to 360 degrees.

If you did everything right and if you are reading this web development tutorial from a "real" browser :) then below is what you should be seeing - a really nice spinning preloader!

Hope you liked this short demonstration. If you did, go ahead and give us a big like on Facebook.com and if you are interested in learning more CSS Tricks go ahead and purchase the book featured in this tutorial.

comments powered by Disqus