Hello reader's, we all have seen preloaders whenever we visit any website, at the loading time it appears at the window panel. I have just tried to create a preloader using bright colours with a punch of animation over it which therefore seems to look beautiful.I hope you all will like it.
In my example, I have taken a div loader-wrapper by setting its position fixed and had set the height and width according to the requirement. Below I have taken a div loader basically comprising of spinning elements along with some animation.
I have also used CSS selectors (before) and (after) that helps to insert something before and after the content of each selected elements using the content property that specifies the content that is to be inserted.
In the CSS code, I have given the loader-wrapper and loader a very high z-index which specifies the stack order of the element and therefore a high z-index will make the content appear on top. To make the loader appear in the middle of the screen , I have set the margin negative from top and left .
In my example, I have also used CSS3 psuedo elements (:before and :after) and setting their to absolute.To the nested squares , I have set the all the directions such as right , left , top , bottom to offset.
To make all squares turn into lines we will set boder-top-color and remaining sides to transparent. Now to make the lines look circle we simply set the border-radius to 50%.
Now, for the animation part I have used @keyframes rule that specifies the animation code for the particular element that need to be aniamted . In my example I have used 2 keyframes to rotate each line to 360 degrees with the spin property.
I have set the animation property to loader class , :before and :after with different time- duration , iteration-count to infinite and animation-timing-function to linear.
Hence, a spinning preloader is created using CSS3 , animation and HTML5 elements.
Note:-The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .