Display CSS Loading Bar while Page Loads

Often we see websites that have lots of CSS, images and javascripts that take a while to load. Visitors might lose interest while waiting for pages to load completely. So now we will create Loading Bar with CSS3 Keyframes and use jQuery to show Loading bar while page content loads completely.

 

 

Display CSS Loading Bar while Page Loads

First we are going to create a Loading bar with HTML and CSS3 keyframes. Here we have a div tag with id=box. And every character in Loading word is wrapped with a span tag.

Now lets apply styling to Loading Bar. I will describe .word:nth-child(1) CSS rule for better understanding. Fade means we applied fading effect to animation. 4s is animation duration. Infinite is animation iteration count which specifies the number of times animation will be played. 200ms is animation delay.

 Complete Code:

Include jQuery Library into any page where this code will be used.

Display CSS Loading Bar While Page Loads
Display CSS Loading Bar While Page Loads
Display CSS Loading Bar while Page Loads.zip
897.0 B
8 Downloads
Details

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top