CSS3 Preloader

CSS3 preloader with animation is the new topic we will see today. We have seen many tutorials, examples or tricks and tips on css3 animations. In previous days, we used animated gif images or jQuery or javascript for adding preloaders in our web applications. But with the introduction of the CSS3, it is very easy to create animated preloaders. The css3 properties like keyframes and transform help us to create css3 preloader with animation. Please refer previous articles on css3 animation before you proceed.

Why to use css3 preloaders?

We have seen so many varieties of animated preloaders on web applications. If you have noticed, many of those preloaders are css3 preloaders. No animated gif images, but with css preloaders. Have you ever thought of the advantages of creating preloaders with pure css and html? One advantage is that the use of pure css and html for the preloader, other than using animated gif image or use of any image and animating them. Another advantage of css3 preloader is easily customizable. When we want change the theme of the application, we can change the color theme of the preloader, to match the application theme. We can create different creative preloaders with the help of css3 and html. So, we will see how to create an animated preloader with css3 and html.

Animated CSS3 preloader

Following is the simple html for adding a preloader.

<div class="circle"></div>
<div class="circle-one"></div>

We have added the html for the preloader. A div with the ‘circle’ class and another with ‘circle-one’ class. Now we will style the html elements with the css.

Here in the css, we have given different width and height for the divs. One’s height and width are more the other div. We are adding border 5px with a color and the border-radius is set to 50% to make the div as a circle. At the end of the css, you can see the animation is called. The values for animation are given in the order; animation-name: spin; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite. The following is css is added for animating the preloader. We will use keyframes to add the rotating effect.

how to customize?

If we want to customize the css3 preloader, just change the colors of borders, width of the borders. If you want to add a background, add to the styles. So, it is very easy to customize the animated css3 preloder to match it with the application themes.