Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

Design a cool preloading spinner without using images or javascript

April 8, 2014 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