Busy.js 1.2 allows you to add/remove loading indicators to html elements (or viewport) 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! It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade to simple quadratic shapes.

WYSIWYG Demo: Get a fast impression of the loading indicators and their illustration qualities.

Demonstration

Shows what "cvi_busy_lib.js" does.

Setting Up

Download "buzy.zip" and include it into your webpage.

Using It

Add overlay to element

ctrl = getBusyOverlay(parent[, overlay[, busy]]);

parent  == element to add the overlay to or "viewport"

overlay      e.g. {color: 'black', opacity: 0.5, ...}

color   == STRING 'black' or '#000000' or 'rgb(0,0,0)' Default: 'white'
opacity == FLOAT 0.0 - 1.0 Default: 0
text    == STRING e.g. 'loading' Default: ''
style   == STRING e.g. 'color: black;' or 'my_text_class' Default: ''

busy         e.g. {color: '#000', size: 32, ...}

color   == STRING '#000000' or '#000' Default: '#000'
size    == INT 16 - 512 Default: 32
type    == STRING 'circle|oval|polygon|rectangle|tube' or 'c|o|p|r|t' Default: 'tube'
iradius == INT 6 - 254 Default: 8
weight  == INT 1 - 254 Default: 3
count   == INT 5 - 36 Default: 12
speed   == INT 30 - 1000 Default: 96
minopac == FLOAT 0.0 - 0.5 Default: 0.25

Edit overlay text

ctrl.settext(STRING);

Remove overlay from element

ctrl.remove();

Examples

if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
ctrl = getBusyOverlay("viewport");
ctrl = getBusyOverlay($('box'));
ctrl = getBusyOverlay($('box'), {opacity:0.5});
ctrl = getBusyOverlay($('box'), {}, {size:16});
ctrl = getBusyOverlay($('box'), {color:'blue', opacity:0.25}, {type:'oval'});
ctrl.settext('Ready...!');
ctrl.remove();
try {ctrl.remove(); delete ctrl;} catch(e) {}
if(typeof(ctrl)=='object') {ctrl.remove(); ctrl="";}

Why use Javascript cvi_busy_lib?

• 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.
• It's dead easy to add or remove the loading indicator to/from an html element.
• Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades to simple quadratic shapes.

History

• Added overlay text editing support

• Added viewport support

• Initial Release

License

cvi_busy_lib.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Images used are copyrighted and are used for demonstration only.

cvi.netzgesta.de  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB