Animated Progress Bar

Published on
Progress Bar, Loading, Colors, CSS3 Transitions
No. of comments
Browser compatibility
Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9
MIT License
Animated Progress Bar CSS Code Snippet

A colorful, animated progress bar that goes from red to green as it progresses.

Check out the smooth transition in the demo (width and color) — no JavaScript involved!

Original PSD by Vin Thomas.


WebGyver said

Love your snippets! Thank you so much for sharing. I've played around with a few of your other snippets, and here's what I'm struggling with a bit.

If my existing CSS (such as a bootstrap.css from Twitter, for example) already has some base styles declared and needs to keep them intact for the rest of the site to continue would you suggest to implement CSS snippets from your site?

Come up with a unique prefix for every class and id that your code snippets have, and then copy existing styles that might cause conflicts with, say, input fields, from the original CSS (bootstrap.css in my case), then re-declare them with the unique pre-fix I've chosen?

That was one approach I was thinking about, but I just wanted to fond out whether you had any better and less time-consuming ideas.

Again, thank yo very much for your snippets. You rock.

Thibaut said


Thanks for the kind words!

Recently I started namespacing my snippets slightly better, using ".widget-element" for example, instead of ".widget > element", and ditching ".container" which was almost certain to conflict. This should make them a bit easier to copy & paste.

Most snippets should be easy to implement, though. They basically have one dependency: reset.css. You may have to reset some margin/padding/list-style, but that should be about it.

Font stacks might cause vertical alignment issues — I hate those — because Arial-based and Verdana-based stacks are quite different. They're usually fixed with a combination of line-height and font-size.

Form elements should prove the most time consuming because all websites have them styled, whereas the snippets expect a clean slate. My approach would be to use namespacing (.widget-input, .widget-label, etc.) and simply reset the properties that conflict with the original CSS.

Thinking about that, one additional issue might be pseudo classes such as :focus, requiring even more properties to be reset & code duplication. Here there's no easy way out; if you want to keep your code clean & DRY you'll have to spend some time merging the two components.

But that's kinda of a good thing I think (sorry I may be going off-topic ^^). My goal isn't to provide code that works in all situations, because that's impossible. It's more to give you a strong starting point that you can work from. That's the best way to learn — edit and then make it your own. And if you already know this stuff then I hope you learn a few tricks, save some time, and be inspired. ;)


farhad said

hi, thanks for your nice snippets, i had a question, how we can change the amount of progress bars, for example change to 95, I couldn't find java script inside it !

Thibaut said

Hi. You need to set the width of the .progress-bar element (e.g. style="width:95%").

Stephan said

Amazing snippet, exactly what I was looking for. Just a quick question though. How do you duplicate the progressbar with checkboxes on the same page?

The obvious thing is adding classes to the inputs and target those instead of the id's and making sure you have a second set of id's for the second progressbar.

Up to that point I can get it working by the css seems to conflict so that I can only use one progressbar each time.

Some examplecode or a fast explanation for a duplicate progressbar on the same page would be awesome. Thanks for the snippet, really appreciate it.

Thibaut said

Hi Stephan — Did you update the for attributes of the second set of labels? (to match the new ids of the inputs that precede them)
Feel free to send me your code and I'll have a look.

Ali aGHasizadeh said

thanks for sharing it, the colors are great
the only things that missing is just a keyframe for progress background

barry said

How do you get the colors to change gradually? Do you have to set an initial color programmatically?

Thibaut said

Hi Barry
Currently the colors are set using CSS classes (.five etc.). You need to use JavaScript to update them dynamically.
This snippet is a year old and if I were to code it again I would use a data-attribute (e.g. data-value="5") instead of classes, which is easier to update than it is to add/remove classes. You could then customize the color using [data-value=5].
Hope this helps.

Lahiru said

Hey , this is an awesome tutorial for me. But I have a small problem....: ( .How to add this automatically running for web page ? Plz Help. Thank You ....

Thibaut said

Thanks, Lahiru. You need to use JavaScript to make it functional.

ariyan said

Really usefull airticle for me .
i will use it in my web
thanks for share

Moda said

Wonderful job! I am using on blog writers status and the bloggers like it. Thanks you CSS Flow.

Leave a comment

Comments are disabled.