Progress Bar

essential 0 196 Views

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>
Member Avatar for DealthRune
DealthRune 2 Light Poster

Neat =)

Member Avatar for ayesha789
ayesha789 7 Posting Pro in Training

I am new to JS, Practically how I use , please give me an example to use .

Member Avatar for BSkiLLs
BSkiLLs 0 Junior Poster in Training

Demo's ??

Member Avatar for israelvainberg
israelvainberg 0 Newbie Poster

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview