Wednesday, April 16th, 2008

Busy.js: Loading indicators with Canvas

Category: Canvas, JavaScript, Library

Busy.js Logo

Christian Effenberger is back with some more canvasy goodness. He has released Busy.js, a library that allows you to add/remove loading indicators to html elements on your webpages (inc. overlay color & transparency). It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource.

Usage

javascript

  1. var ctrl = getBusyOverlay(document.getElementById('box'));
  2. ctrl.remove();

Features

  • supports Canvas and VML (identical representation)
  • Fast and easy to implement (perfect for ajax applications)
  • Don’t need to spend time in an image editor creating gif animations
  • Very flexible by multiple (optional) parameters for individual styles
  • Get always a proper loading indicator independently of parent elements style
  • Moves the DOM tree up to find the next parent block-level element
  • Freezes the parent element visual (overlay) and technical (mouse events)
  • Works with html elements even if (moz/webkit)-border-radius is activated
  • In older browsers, the script degrades to simple quadratic shapes
  • It’s dead easy to add or remove the loading indicator to/from an html element

Busy.js

Posted by Dion Almaer at 9:13 am
5 Comments

++++-
4 rating from 48 votes

5 Comments »

Comments feed TrackBack URI

The pace where you’d want a progress meter most — not the spinning “busy” as here — is for file uploads. But this is very very hard to achieve. You need either a Flash solution (that is pretty complex and has limitations), or a of combination PHP and perl (which I could not easily get to work), or a bleeding edge version of PHP (which I can’t install on shared hosts). Why isn’t an upload progress API exposed to JavaScript? Doesn’t the browser have all the info it needs? File-size, bytes uploaded…

Comment by jamienk — April 16, 2008

@jamien: No you can’t see bytes uploaded, w/o some help. See http://swfupload.org/

Comment by Tr0y — April 16, 2008

@jamienk: That and a lot more very helpful information is kept to the browser for security reasons. JavaScript in general has limited access to HTTP transaction. Even with XMLHttpRequest object, you have controls over only the request and some parts of HTTP transaction but never the TCP/IP. Thus making this very tricky. In flash however you do have more information available to onProgress() method in FileReference object -> http://livedocs.macromedia.com/flash/8/main/00002204.html. If you have $$$ like flickr, you can write your activeX for IE and FF and get that and whole lot more info to JavaScript :-)

Comment by Tahir — April 16, 2008

Nice tool, but not so nice licensing :(

Comment by besh — April 17, 2008

Yup, licensing is a no go for my uses.

It’ll be interesting to see what the licensing model will be, if someone decides to buy it.

Impressive work, too bad he’s not really trying to sell it to developers. Cryptic licenses only sells software if you’re an established Enterprise vendor :P

Comment by MorganRoderick — April 17, 2008

Leave a comment

You must be logged in to post a comment.