Progress Bar

0

By Keith Bryan Santiago on Aug 20th, 2008 4:48 pm

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>

3 Years Ago

0

Neat =)

DealthRune

Light Poster

45 posts since Apr 2009

Reputation Points: 12

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

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

ayesha789

Posting Pro in Training

496 posts since Jun 2009

Reputation Points: 17

Solved Threads: 7

Skill Endorsements: 5

3 Years Ago

0

Demo's ??

BSkiLLs

Junior Poster in Training

68 posts since May 2009

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

2 Years Ago

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

israelvainberg

Newbie Poster

1 post since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0