Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Simple indeterminate progress bar

From Wiki
Jump to: navigation, search
Article Metadata
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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="script.js"></script>
<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;">


Animation effect is achieved by adjusting the backgroundPosition attribute on the fly. See animate() function.


var i=0;
var animationEnabled= false;
var animationElement = null;
var intervalId=null;
function toggleAnimate(){
animationElement = document.getElementById("progress");
if (!animationEnabled) {
animationEnabled = true; = "block";
intervalId = setInterval("animate()", 100);
else { = "none";
animationEnabled = false;
function animate(){ = "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 05:26.
64 page views in the last 30 days.