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)
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);