Click here to Skip to main content
14,927,528 members
Articles / Programming Languages / Javascript
Posted 11 Oct 2008


44 bookmarked

Javascript Progress Bar

Rate me:
Please Sign up or sign in to vote.
3.97/5 (16 votes)
11 Oct 2008CPOL2 min read
how to create a manual and automatic progress bar using JavaScript

If you look for a pretty javascript progress bar to use as a printing progress bar or any other use and you need it to work manually and / or automaticlly the read this article.


I needed to build a custom progress bar that could be progress automaticly and manualy by code.
This progress bar can be helfull as a printing progress bar or any other usfull use.
the progerss bar get the maxStep counetr and print the right number of bullets per step.
max bullets per progress bar determind by the size of the background image and can be change in javascript file by the parameter numOfBullets.

The progress bar has two operation mode:

1. Manual - by calling NextStep method.
2. Automatic - activate NextStep method automaticlly every configured interval.

The progress bar contain some usfull methods:

1. (constructor)(maxStep) - get the maxStep parameter (default is 1)
2. SetProgressBarContainer(progressBarContainer) - get the progress bar DIV container. where all the bullets will be place.
3. SetMaxStep(maxStep) - get the maxStep parameter of the progress. (if we need to change the maxStep in after initiance).
4. NextStep() - show the next bullets for the next step.
5. Auto() - start automatic progressing of the pgrogress bar bullets.
6. Stop() - stop the automatic progress bar.
7. Reset() - reset parameters.

class global parameters :

1. numOfBullets - the number of bullets thet can be entered in the progress bar backgound.
2. timeInterval - the time interval in seconds to move nextStep to use in auto mode.


The javascript file contain a progress bar class that create using the open source of Prototype JavaScript Framework .
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Using the code - Embedding and including

First include the prototype js file and the progress bar js file.

<script type="text/javascript" language="javascript" src="Js/prototype-"></script>
<script type="text/javascript" language="javascript" src="Js/ProgressBar.js"></script>
Place in html page the progress bar div and name it progressBarContainer. In the body tag set the onload method.
<body  önload="onload()">
and the implemtation is:
//handle of the maxStep textbox
var maxStep;

function onload()
	//handle of the maxStep textbox
	maxStep = $("maxStep");
	//get progressBar container div
	var progressBarContainer = $("progressBarContainer");
	//create new instance of progressBar class and pass the number of max step
	progressBar = new ProgressBarClass(maxStep.value);
	//set progressBar container div
	//set callback function to be notify when step changed
	progressBar.OnStepChange = OnStepChange;	
Create a buttons for start, stop, reset,next the progress bar and attach them the next methods.
function Auto()
	progressBar.Auto ();
function Next()
	progressBar.NextStep ();
function Stop()
	progressBar.Stop ();
function Reset()
	progressBar.Reset ();
	$("pages").innerHTML = "0 pages printed";
function SetMaxStep()
There progress bar class also can get a delegate to a user method which activate on any stepChange and contain the current step
//set callback function to be notify when step changed
progressBar.OnStepChange = OnStepChange;

function OnStepChange(currentStep)
	$("pages").innerHTML = currentStep + " pages printed";

Thats it.
I hope that you find it helfull like me.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Lazmi ofer
Software Developer
Israel Israel
No Biography provided

Comments and Discussions

QuestionNot Working Pin
mparvez20-Sep-12 0:50
Membermparvez20-Sep-12 0:50 
AnswerRe: Not Working Pin
Lazmi ofer20-Sep-12 0:55
MemberLazmi ofer20-Sep-12 0:55 
GeneralDoesn't work with Firefox Pin
Dennis Marks27-Oct-10 5:02
MemberDennis Marks27-Oct-10 5:02 
GeneralDoesn't work with Chrome Pin
Brooky Brook12-May-10 8:35
MemberBrooky Brook12-May-10 8:35 
Generalgood one Pin
S Gnana Prakash16-Apr-10 11:02
MemberS Gnana Prakash16-Apr-10 11:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.