Animated Progress Bar

Published on
Tags
Progress Bar, Loading, Colors, CSS3 Transitions
No. of comments
13 comments
Browser compatibility
Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9
License
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.

13 comments

WebGyver said
1f0509aa1b6a82b97f22de29907b95ef

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 working...how 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
B6374f07090c513a73b875e0c5fe5924

Hi

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. ;)

Cheers

farhad said
F94fd46c27f235dd5281ee583c70a2e7

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
B6374f07090c513a73b875e0c5fe5924

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

Stephan said
47335624f5684fc13db52c5c9f3e8148

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
654c04b8110238c9abd7a62e88d53b31

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
A04a6580e3fda6c505f4426970e8a753

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

barry said
6438901c755695e4a34aa760f9372da6

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

Thibaut said
654c04b8110238c9abd7a62e88d53b31

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
Caaf28230c336861787bdc4c0e2c91ac

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
654c04b8110238c9abd7a62e88d53b31

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

ariyan said
3a021845ed15a9c902f522dd3be09b8f

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

Moda said
6584039290ad5a927ce819a02183721d

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

Leave a comment