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...
Progress Bar
<!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"> </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>
DealthRune 2 Light Poster
Neat =)
ayesha789 7 Posting Pro in Training
I am new to JS, Practically how I use , please give me an example to use .
BSkiLLs 0 Junior Poster in Training
Demo's ??
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.