Switching to a watch cursor during the wait delayed the subject's departure for about 20 seconds. An animated watch cursor was good for over a minute, and a progress bar would keep them waiting until the Second Coming - or Windows 98, whichever came first.
More at http://web.archive.org/web/
Granted, this was maybe two decades ago, but his words still hold true. However, to keep this up-to-date, we'll need to roughly halve the waiting times mentioned. This is the iPad generation. Bandwidth and data transfer speeds have quadrupled. Instant gratification is the in-thing. People are getting used to obtaining information with a swipe of the finger. These days, it takes roughly 2 to 5 seconds of waiting time before the user will turn to you and holler "Ah hia! Your website broken lah, dey!"
With that in mind, we're going to create a Progress Bar. Ostensibly, this displays how much of the current page has been loaded, and should keep the user content to wait. Except that this isn't a real loader. It's just an animated bar designed to harness the user's attention span. Hence, what I like to refer to as the Wayang Progress Bar. If you're neither Singaporean nor Indonesian and don't know what wayang is, wayang kulit is a form of shadow puppetry which originated in Java, Indonesia, and essentially means, in local parlance, "purely for show".
 |
| Shadow Puppet |
And that's exactly what the Wayang Progress Bar is; purely for show. It won't speed up your website, nor will it actually display how much of the site has loaded. Its purpose is merely to stall the user till your page is done loading!
This Wayang Progress Bar will have no graphics, because graphics take time to load and the whole point of the Wayang Progress Bar would be lost if it significantly increased waiting time. Instead, we'll be leveraging heavily on HTML, CSS and JavaScript.
This is your layout:
<!DOCTYPE html>
<html>
<head>
<title>Progress Loader test</title>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
</body>
</html>
<html>
<head>
<title>Progress Loader test</title>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
</body>
</html>
Now add the CSS declaration to the head tag.
<!DOCTYPE html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #440000;
}
</style>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
</body>
</html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #440000;
}
</style>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
</body>
</html>
This is how it's going to look like at the moment:
Nothing fantastic, huh? Just a long rectangle. Not to worry, we're just getting started! 500 pixels is a rough guide. You may want to make the progress bar longer or shorter, but you'll need to adjust the margin-left property of the loader_content div tag accordingly.
Now, add this JavaScript snippet to your header tag. Also, add the JavaScript event handler to your HTML.
<!DOCTYPE html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width:500px;
height:20px;
border:1px solid #777777;
overflow:hidden;
}
.loader_content
{
width:500px;
height:20px;
background: #440000;
}
</style>
<script>
var loader;
function start_loader(varloader)
{
loader=setInterval(function () {process_loader(varloader+"_content")}, 500);
function process_loader(varloadercontent)
{
var inc=1;
var marginleft = document.getElementById(varloadercontent).style.marginLeft;
marginleft=marginleft.replace("px","");
marginleft=parseInt(marginleft)+inc;
if (marginleft>=0)
{
document.getElementById(varloadercontent).style.marginLeft="-5px";
}
else
{
document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
}
}
}
</script>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
<script>
start_loader("loader");
</script>
</body>
</html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width:500px;
height:20px;
border:1px solid #777777;
overflow:hidden;
}
.loader_content
{
width:500px;
height:20px;
background: #440000;
}
</style>
<script>
var loader;
function start_loader(varloader)
{
loader=setInterval(function () {process_loader(varloader+"_content")}, 500);
function process_loader(varloadercontent)
{
var inc=1;
var marginleft = document.getElementById(varloadercontent).style.marginLeft;
marginleft=marginleft.replace("px","");
marginleft=parseInt(marginleft)+inc;
if (marginleft>=0)
{
document.getElementById(varloadercontent).style.marginLeft="-5px";
}
else
{
document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
}
}
}
</script>
</head>
<body>
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
<script>
start_loader("loader");
</script>
</body>
</html>
For more about JavaScript timer functions, click here: http://www.w3schools.com/js/js_timing.asp
Now refresh your browser, sit back, and enjoy the magic!
How do I use this?
You can slip the loader div anywhere you please. Though I'd recommend having it just after your body tag.What the code does
There's an outer div with the id loader_box. And an inner div loader_content, colored brown (#440000), within it. The loader_content div is offset 500px to the left initially. The overflow:hidden CSS value ensures that any part of loader_content that goes out of loader_box is invisible.As soon as the timer function process_loader() is triggered, it progressively alters the margin-left property of loader_content so that it appears as though the loader_box is filling up! You can adjust the speed of the animation by changing the value highlighted below. This line basically tells your browser to trigger the process_loader() function every 500 milliseconds, so decrease the value if you need to speed it up!
loader=setInterval(function () {process_loader(varloader+"_content")}, 500);
This Wayang Progress Bar should be good for an average page lag of 20 seconds. If you need a longer time, adjust the animation speed or the length of the Wayang Progress Bar.
Cool, eh? But that's not all. Look at the JavaScript in the If-Else statement. If the margin-left value exceeds 0px, which means the box is full, the display automatically keeps it at roughly 99%. So if it reaches 100% and your page is still not loaded, the user won't be asking why?
Let's make it pretty!
Give your progress bar rounded corners! Add the following code to your CSS.
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
border-radius: 9px;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #440000;
}
</style>
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
border-radius: 9px;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #440000;
}
</style>
Now change the colour of your bar. For some cool color combos, visit http://www.colorzilla.com/gradient-editor/
I'm just going to go with a nice flamingo pink. This is CSS3, but you don't need to learn it all right now, we're just having a little fun.
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border:1px solid #777777;
border-radius: 9px;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #ff4444; /* Old browsers */
background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
}
</style>
.loader_box
{
width: 500px;
height: 20px;
border:1px solid #777777;
border-radius: 9px;
overflow: hidden;
}
.loader_content
{
width: 500px;
height: 20px;
background: #ff4444; /* Old browsers */
background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
}
</style>
A This is just a simulation of how the final result will be. Get creative!
There are more enhancements you may like to consider for your Wayang Progress Bar. They'll be discussed in the following parts of this web tutorial.
No comments:
Post a Comment