Demo

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.


How to use


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>cvi_busy_lib.js :: demo</title>
	<style type="text/css" media="all">
	@media screen, projection {
		body {background-color: #FFFFCC; color: #444;}
		.header {
		background-color: #ccf;
		color: #444;
		font-size: 90%;
		margin: 0;
		padding: .2em 2%;
		border: 8px solid white;
		-moz-border-radius-topleft: 16px;
		-moz-border-radius-topright: 16px;
		-webkit-border-top-left-radius: 16px;
		-webkit-border-top-right-radius: 16px;
		}
	</style>
<!--[if IE 6]>
	<style type="text/css">
		.header, .sidebar {position:relative}
	</style>
<![endif]–>
<script type="text/javascript" src="cvi_busy_lib.js"></script>

<script type="text/javascript" charset="utf-8">

var tval;
</script>

</head>
<body>
<div class="wrapper">
<div id="top" class="header" onclick="try {tval.remove(); tval='';}catch(e)
{tval=getBusyOverlay(this,{color:'blue',opacity:0.25});}">

<h2>Demo  <small>[<i>Click to add overlay and click again to remove.</i>]</small></h2><p></p>
</div>
<div id="button" class="button"></div>
</div>
</body>
</html>

More info
http://www.netzgesta.de/busy/