Progress Bar Plugin



Overview

This is a progress bar plugin for jQuery.

Usage

First, include the progress bar javascript file.

<script src="jquery.progressbar.js" type="text/javascript"></script>

Next, include the styles necessary to render the progress bar correctly.

	/* progress bar container */
	#progressbar{
		border:1px solid black;
		width:200px;
		height:20px;
		position:relative;
		color:black; 
	}
	/* color bar */
	#progressbar div.progress{
		position:absolute;
		width:0;
		height:100%;
		overflow:hidden;
		background-color:#369;
	}
	/* text on bar */
	#progressbar div.progress .text{
		position:absolute;
		text-align:center;
		color:white;
	}
	/* text off bar */
	#progressbar div.text{
		position:absolute;
		width:100%;
		height:100%;
		text-align:center;
	}

Finally make the call to render the progress bar.

  $("#progressbar").reportprogress(0);

In the demo below I’m running the progress bar from a timer like so.

	var pct=0;
	var handle=0;
	function update(){
			$("#progressbar").reportprogress(++pct);
			if(pct==100){
				clearInterval(handle);
				$("#run").val("start");
				pct=0;
			}
	}
	jQuery(function($){
		$("#run").click(
			function(){
				if(this.value=="start"){
					handle=setInterval("update()",100);
					this.value="stop";
				}else{
					clearInterval(handle);
					this.value="start";
				}
			}
		);
		$("#reset").click(function(){
			pct=0;
			$("#progressbar").reportprogress(0);
		});
	});

Demo

Download

Progress Bar Plugin Alpha 1