Comments on: CSS3 Progress Bars

By: Brett Widmann

Brett Widmann — Fri, 22 Apr 2011 00:59:29 +0000

I really like how this looks and works! Thank you.

By: Some guy

Some guy — Wed, 20 Apr 2011 10:53:52 +0000

Looks bad in Firefox 3 however.

By: brum

brum — Tue, 19 Apr 2011 14:06:10 +0000

Really great job! And thanks for sharing…

By: Boris

Boris — Wed, 16 Mar 2011 11:36:17 +0000

I've adjusted the code somewhat. I've added a span to the markup that holds the percentage.

35%

The progress span gets hidden on pageload and is then faded in when the bar animation is finished. I also needed the progress bar to resize with the container when the browser gets resized. jQuery's width() only returns px, so I needed a little workaround.


jQuery('.meter-wrapper .progress').hide();
jQuery(".meter > span").each(function() {
	var w = ( 100 * parseFloat(jQuery(this).css('width')) / parseFloat(jQuery(this).parent().css('width')) ) + '%';
	jQuery(this).width('0%').animate({width: w}, 1200, function() { jQuery('.meter-wrapper .progress').fadeIn(); } );
});

By: Apartmani Soko Banja

Apartmani Soko Banja — Tue, 08 Mar 2011 09:07:33 +0000

Excellent job done. Can easily be used

By: Andrew

Andrew — Mon, 07 Mar 2011 07:22:39 +0000

Very cool but you gotta have the animation running the other way man! That way the progress bar looks like it’s making more progress than it is! This way it looks like it’s slower.

By: college classifieds

college classifieds — Mon, 07 Mar 2011 02:54:49 +0000

While all of this stuff is super cool, they are not going to be used until CSS3 and HTML5 have become a standard. I wish we cool jump ahead a few years in terms of HTML standards….too many dang people are still running IE7/IE8. AGGGHH

By: EstherH

EstherH — Sun, 06 Mar 2011 08:19:36 +0000

Chrome has a bug when you use an “inset” box-shadow along with a border-radius. see http://code.google.com/p/chromium/issues/detail?id=128

anyone know a workaround for this?

By: Jesús

Jesús — Sat, 05 Mar 2011 22:28:35 +0000

It is good news for my wordpress (style)

By: Ali Bahrami

Ali Bahrami — Wed, 02 Mar 2011 19:43:34 +0000

OMG,
That’s awesome , Chris.

I thought I know a little about CSS but I guess I know nothing about it :P

Wish you better jobs ^_^