Simple indeterminate progress bar
Article Metadata
Most AJAX functions take a while to complete, hence the end user should be informed that your widget is actually doing something. This article presents how to implement a simple indeterminate progress bar using JavaScript and css.
First part is the hardest; you will need to draw a suitable image to act as a progress bar background. Background image defines the size of your progress bar. Try to draw something that matches nicely, when looped around, like the image below.
Then you will need to write some html code to hold your progress bar. Any block level element should do. Set the newly created image as a element background and define element’s size using style sheets.
html page
<html>
<head>
<title>Loading</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body id="body">
<button type="button" onclick="toggleAnimate();">Toggle progress bar</button>
<div id="progress" style="display: none; background: url(wait.png) no-repeat;
width: 150px; height:15px; border:solid; border-color:#E5971B;">
</div>
</body>
</html>
Animation effect is achieved by adjusting the backgroundPosition attribute on the fly. See animate() function.
script.js
var i=0;
var animationEnabled= false;
var animationElement = null;
var intervalId=null;
function toggleAnimate(){
animationElement = document.getElementById("progress");
if (!animationEnabled) {
animationEnabled = true;
animationElement.style.display = "block";
intervalId = setInterval("animate()", 100);
}
else {
animationElement.style.display = "none";
animationEnabled = false;
clearInterval(intervalId);
}
}
function animate(){
animationElement.style.backgroundPosition = "0px "+ -i +"px";
i = (i < 175? i+5 : 0 );
}
If everything works, it should look like this:
(no comments yet)