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)

Comments

Brian Dusablon wrote on March 9, 2009 at 11:54 am:

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

Philip Hutchison wrote on March 9, 2009 at 12:07 pm:

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

Something like this:

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

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

courseProgBar.set(percentcomplete);
</pre>

Similar Posts

2 Comments

  2. 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.