March 6, 2009 / By / General, JavaScript / 2 Comments

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 thoughts on “Image-Free Progress Bar using MooTools and Canvas”

  2. Philip Hutchison

    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.

Scroll to Top