Busy.js 1.0 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! 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

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

Remove overlay from element

ctrl.remove();

Examples

if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
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.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

• 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. There are also Commercial Software Licenses available.

Images used are copyrighted and are used for demonstration only.

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