How to create progress bar using css | Wave the world

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.




Enjoy :)

2 comments:

  1. sorry and this is not the place to share your blog links.

    ReplyDelete
  2. You are so interesting! Ido not believe I have read anything like
    that before. So great to find somebody wiyh genuine thoughts
    on this topic. Seriously.. thanks for starting thks up.
    Thiis web site is one thing that is needed on thhe web,
    someone with a bit of originality!

    my page ... video making

    ReplyDelete

 

Pro

About