Creating a loading icon in CSS3 without using gif

Sometimes there’s a need for showing a loading icon on a webpage or something that would convince the user that the server is processing you data (and keep him satisfied). The most widely used technique for achieving this is using gif files. But wouldn’t it be nice if you could save some traffic by using a static image instead?

Yes, that’s right. With the help of CSS3 animations that is easily possible. You can simply add a static image in the html part and then animate it using the power of CSS3 animations.

  1. Let’s start with an image.
    spinner4
    I took the spinner image from icomoon.io. You can find many other types of icons there if you want. Pick the one you like.
  2. Embed the image into the html file using the <img> tag wherever you want and assign its class attribute to something with which you can find it easily. Here I have used class="spinner". Like this:
    <img class="spinner" src="spinner2.png" alt="Loading ..." />
  3. Now it’s time to do the CSS. In your CSS part (it can be external or internal, doesn’t matter), write the following (at the top of the file):
    @keyframes rotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
    }
  4. Next write the styles for the image that you have inserted.
    img.spinner {
    animation: rotate 2s linear infinite;
    }

    I have wrote spinner because I have used the class spinner.
  5. And you’re done. Test it out by opening it any modern web browser (since older ones don’t support animations).
  6. If it doesn’t work try using vendor prefixes for the browser you are using. The list of vendor prefixes for the most common browsers are:
    • -webkit- : For Google Chrome
    • -moz- : For Mozilla Firefox
    • -o- : For Opera Browser
    • -ms- : For MS Internet Explorer

    You must add vendor prefixes before every CSS property and even before the keyframes word.
    For example: If you are using Google Chrome
    @-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); }
    }

    And similarly for the image tag:
    img.spinner {
    -webkit-animation: rotate 2s linear infinite;
    }

If you want a complete documentation on animate property you can find it here.

That’s it folks! Try it out and if in doubt, feel free to ask me.

Advertisements

One thought on “Creating a loading icon in CSS3 without using gif

Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s