LiveLoveAutumnFall.com

Matt McInerney posted a tutorial on “CSS Percentage Bars” earlier today and I like the idea (and the code). As soon as I saw Matt’s percentage bars I got to thinking of what I could do with them. Well jQuery came to mind since I have been using it a lot lately, and you can see what I came up with here.

It’s essentially Matt’s code with a couple of tweaks. I removed the need for inline styles by using the title attribute on the bar div.

<div class="box">
	<div class="bar" title="70"></div>
</div>

The above example will create a bar that animates from 0% to 70%. It will also display the width of the bar just like Matt’s example does.

You can download all of the source files to create the bars on the example page. I hope someone finds them useful and if you happen to use them, send me a link so I can see them in action.