pipwerks: home

pipwerks

Standards-friendy eLearning and Web development (HTML 5 version)

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. Lazy loading excanvas.js
  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);

Want a gravatar? They're easy and free! Just sign up at gravatar.com

Add your two cents!

You can use the following HTML tags in your comment: <a> <abbr> <b> <blockquote> <cite> <code> <em> <i> <q> <strike> <strong> <pre>

The anti-spam code is my LAST NAME, and can be found in the page footer.
Be careful not to misspell it.

I'm currently moderating comments. Please don't submit your comment twice; it will appear as soon as I can approve it.