×
Namespaces

Variants
Actions

Simple indeterminate progress bar

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: isalento (23 Jul 2009)
Last edited: hamishwillee (10 Oct 2012)

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.

Wait progressbar.png

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: Progressbar still.png

This page was last modified on 10 October 2012, at 08:26.
53 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×