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”

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

Comments are closed.

Scroll to Top