0

A simple progress bar that you can addUp with some common events' like redirecting the user to another source. And while they wait let this progress bar do some work for them...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
form { margin: 0; padding: 0; }
form div { margin: 0;
                padding: 0; 
}
input { margin: 0; 
          padding: 0; 
          border: none; 
          display: block; 
          height: 4px; 
          width: 13px; 
          float: left; 
}
.a { background-color: grey; }
.b { background-color: dimgrey; }
.c { background-color: grey; }
.d { background-color: dimgrey; }
.e { background-color: grey; }
.f { background-color: dimgrey; }
.g { background-color: grey; }
#wrapper { 
float: left; 
font-size: 46px; 
font-weight: bold; 
margin: 20px 0 0 10px; 
text-align: left; 
color: silver; 
}
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
/* By : essential
    A simple progress bar-
    that you can addUp with 
    any event on your page'.
 
This simple demo will perform
redirection to the user. To let you see how this progress bar works on this page!  */
function newLocation()
{ 
var counter = setTimeout( 'newLocation()', 1000 ) -1;
var _loading = [ 'L', 'L 0', 'L 0 A', 'L 0 A D', 'L 0 A D I', 'L O A D I N', 'L O A D I N G' ];
var barColor = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ];
bar.elements[counter].blur();
bar.elements[counter].className = barColor[counter];
if ( counter == 6 ) 
{ 
clearTimeout( counter );
window.location = 'http://YourDomainName.com'; 
}
document.getElementById('container').innerHTML =  _loading[counter]; 
} 
// DONE HIDING -->
</script>
</head>
<body onload="newLocation();">
<div id="wrapper">
<span id="container">&nbsp;</span><br />
<form name="bar">
<div>
<input name="b1" class="fake" type="text" size="2" />
<input name="b2" class="fake" type="text" size="2" />
<input name="b3" class="fake" type="text" size="2" />
<input name="b4" class="fake" type="text" size="2" />
<input name="b5" class="fake" type="text" size="2" />
<input name="b6" class="fake" type="text" size="2" />
<input name="b7" class="fake" type="text" size="2" /></div>
</form>
</div>
</body>
</html>
5
Contributors
4
Replies
7
Views
9 Years
Discussion Span
Last Post by israelvainberg
0

In my opinion this is a very bad example of a javascript usage.
This script is delaying the users actions for no good reason.

A true progress bar needs to show the user a real information about the loading progress of the Page/Media Content/Ajax Request.

In terms of user-experience (UX), this script is a big piece of junk.

But it gave me a nice idea. 3 ways of implementing a better progress-bar:
1. Using 100% Javascript + DOM - Using DOM Elements count.
2. Using nested images (of 1px height & 1px width) with onLoad event which triggers the progress bar.
3. Using Flash Object + ExternalInterface + ActionScript (getBytesLoaded + getBytesTotal).

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.