Wednesday, April 16th, 2008
Busy.js: Loading indicators with Canvas
Category: Canvas, JavaScript
, Library
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:
-
-
var ctrl = getBusyOverlay(document.getElementById('box'));
-
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
Related Content:
4.1 rating from 43 votes
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…
@jamien: No you can’t see bytes uploaded, w/o some help. See http://swfupload.org/
@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 :-)
Nice tool, but not so nice licensing :(
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