How to create progress bar using css

Hi friends,

               Today i'll tell you about some programming stuff. If you have the knowledge of CSS and HTML you can easily implement this progress bar and can use according to your need. In my tutorial i have implement the progress bar using css only. But how, let's begin.

You all know about div tag. Create a div with any class name. Here my class name is prog.

Now write css code inside the style tag.

In the above CSS code i have mentioned animation named move, so we have to also write the code for move. move animation is call by three different browser engine -webkit-, -moz-, -o-. This is because the different browsers support different browser engine. -webkit- browser engine is used for Chrome, Safari , -moz- for Mozila and -o- is used for Opera browser. So if you run your page different browsers, it should be work properly.

Now write the code for animation move.

Great. Your work is completed. Now save the file with the extension of .html and run the program. The progress bar will be look like.

You can easily modify this progress bar according to your need. For example i have change the height from 4px to 30px and color #fff

Demo

Progress Bar1

Progress Bar2

Take the mouse over the progress bar and you will see the progress bar.

To download the source code follow the link.

Download Source Code

Enjoy :)