Posted on by Philip Hutchison

Image-Free Progress Bar using MooTools and Canvas

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)

New SCORM ebook coming soon!

I'm writing an ebook explaining how to build an HTML-based SCORM course. Subscribe to be notified when it's ready, as well as receive early bird pricing and some free goodies!

No spam, no sharing your email address, unsubscribe at any time. Powered by ConvertKit
Advertisements

2 Replies to “Image-Free Progress Bar using MooTools and Canvas”

  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.