Javascript Progress Bar

Hey Guys,

I'm looking for a progress bar designed written in js. I would prefer one that doesn't rely on js framework but it can work with prototype.

I tried this but I couldn't get it to work.
http://pierrick.hymbert.googlepages.com/progressBarExamples.html

 

erm - i had a similar need to do a progress bar not that long ago - perhaps this will make sense to you, although it is done for mootools:

http://dci.uk.net/gallery/ (i was once working on my own portable 'drop some files into a folder full of images, no DB' kind of gallery but i tend to dislike the code now).

anyway, bottom left, it pre-loads the images and displays the progress indicator.

the idea is simple:
draw an image:
200px wide so each percent is represented by 2 pixels...

a css entry and a div to match:

.progress {
	width: 200px;
	border: 1px solid #888;
	background-color: #666;
	background-image: url(img/progress.gif);
	background-repeat: no-repeat;
	background-position: -210px 0;
	height: 14px;
	color: #F4F4F4;
	font-weight: bold;
}
</style>
...
<strong>Preloading full:</strong><br />
<div class="progress" id="someid"></div>

HTML:

notice how the background-position is set to -210px (off-screen for the div)

and add the JS that changes the background position property:

var showProgress = function(target, count, total, message) {
	var percent = total / 100, donePercent = (count / percent).round(), BGoffset = 200 - (donePercent*2).round();
	$(target).set({
		styles: {
			"background-position": "-" + BGoffset + "px -2px"
		},
		html: "  " + count + " of " + total + " " + message + " ("+donePercent+"%)"
	});
};

// now to use it... for example: define some images to load
var imageArray = ["img1.gif","img2.gif","img3.gif"], message = "images loaded";

// use mootools to bring them as assets (load them) and report updated % as progress
new Asset.images(imageArray, {
    onProgress: function(c, i) {
    	showProgress($("someid"), c, imageArray.length, message);
    },
    onComplete: function() {
    	showProgress($("someid"), imageArray.length, imageArray.length, message);
    }
});

// another way to use it is to simply tell it to show whatever - for example, the user has filled in 5 of 13 fields of a form, encourage them:

showProgress($("someid"), 5, 13, "fields done"); // let it work out the % etc. 

PHP:

obviously this uses a framework - but the idea is there - just move the background image and do the calc. if there's interest, i may write a tutorial for this in my blog and release it but i just don't have the time to do so today - so treat this is pseudo code and get it working - should be easy to do in prototype.

 

Thanks for sharing.

 

This looks like a good script.

http://www.webappers.com/progressBar/