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.

Clickable Demo AJAX Demo

Setting Up

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

<script type="text/javascript" src="cvi_busy_lib.js"></script>

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?

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

History

Version 1.0

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