pipwerks: home

pipwerks

Standards-friendly eLearning and Web development

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)

Like what you see? Why not share it!

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Twitter

Related posts:

  1. TextAreaExpander Class for MooTools
  2. Font replacement techniques
  3. Modal.js updated
  4. Custom modal windows using canvas and MooTools
  5. Fun with canvas and MooTools: a Rectangle class

This entry was posted on Friday, March 6th, 2009 at 1:04 am and is filed under General, JavaScript with the tags , , , , , , ,

What others are saying... (2 comments so far)

Brian Dusablon
March 9th, 2009, 11:54 am.

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

Philip Hutchison
March 9th, 2009, 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:

var courseProgBar = new ProgressBar({
    id: "courseProgBar",
    injectInto: document.body,
    width: 400,
    height: 12
});
 
 
var percentcomplete = Math.round((completedpages / totalpages) * 100);
 
courseProgBar.set(percentcomplete);