Progressbar with jQuery and css

Example

Redraw

CSS


.pb_wrapper {
		height: 30px;
		border: 1px #ccc solid; overflow: hidden;
		background: rgb(226,226,226);
}
	
.pb {
		height: 30px;  
		
		background: rgb(235,241,246);	
}
	
.pb_title {
		position: absolute; padding: 5px 0px; font-size: 10px; text-align: center;
}

JavaScript


function progressbar(div, progress, width) {

	var wrapperWidth = width;
	var progressbarWidth = Math.round( wrapperWidth / 100 * progress );
	
	
	var bar = "<div class='pb_wrapper' style='width: "+width+"px;'><div class='pb_title' style='width: "+width+"px;'>"+progress+" %</div><div class='pb' style='width: "+progressbarWidth+"px;'></div></div>";
	
	$(div).html(bar);
}

Initialize


	<div id='progressbar'></div>
	<script>progressbar('#progressbar', progress, 300);</script>