Image-Free Progress Bar using MooTools and Canvas | pipwerks

As part of my ongoing experiments with <canvas>, I decided to convert an image-based progress bar to an image-free canvas-based system. I just finished whipping up a proof-of-concept; it uses MooTools to generate the canvas and CSS code. No images were harmed in the making of this progress bar.

More info later (time permitting)

2 Comments

Brian Dusablon says:

March 9, 2009 at 11:54 am

Dude. Spectacular. Now, to find something to use it on.

I’m using it as a progress meter on an HTML-based course… it shows the user their percentage completion.

Something like this:

var courseProgBar = new ProgressBar({
    id: "courseProgBar",
    injectInto: document.body,
    width: 400,
    height: 12
});


var percentcomplete = Math.round((completedpages / totalpages) * 100);

courseProgBar.set(percentcomplete);

Comments are closed.