Beautiful and Simple CSS3 Loader

As more and more sites are using Ajax to load contents, ajax loaders are getting more and more popular. Web developers usually use .GIF animated images as loaders. Some use SVG images to show a loader while content is loading. With advancement of CSS and with addition of new properties like transform and keyframes, now creating animations in CSS3 isn’t a difficult task. Using CSS, developers have created a lot of loaders.

Today, I saw a Pure css3 build loader at wifeo. The loader is amazing and I thought it would be worth sharing with you guys. Here is the demo:

 
 
 
 

Usage:

You can use this CSS loader in two simple steps:

1. Add the following CSS code to your website:

2. Then add the following HTML to the page:

You can also check the orignal post from wifeo at http://www.wifeo.com/code/43-css3-simple-loader.html

Let me know if you need further help with this in comments.