Andrew Hathaway andrewhathaway

How to write a cool CSS3 progress bar

I was set the task to write a progress bar at work recently, and I couldn't really think of a way to do it at first. After a while I came up with this. I'm going to show you how to write one and if you want to see a demo there is one here. We will start with a basic progress bar and extend it as we go on.

The way I did this is pretty simple to be honest. I started off with a div. This acts as your outer 'container' which you set to the width of your choice.

HTML

<div class="meter"></div>

	/**
	* SUCKS
	*/
	* { padding: 0; margin: 0; }
	.container { width: 960px; margin: 0 auto; }
	header {
	width: 100%;
	height: 40px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c67be), color-stop(100%,#5760b2));
	border-bottom: 1px solid #272f7e;