javascript based progress bar

Question

Hello, I am curious how can a javascript (or also benefiting from jquery) based progress indicator such can be developed:

My first idea is something such as:

function drawBar(total,sofar){
.........................

}

where it consumes the max number(20 in our case) and sofar (15 for the picture).

But how can it be implemented?

Is there any jquery based plugin to achieve this?

Regards

Answer 1

This is usually done with CSS, by creating a div the total size of your progressbar, and then having another div child of that which has a percentage width of how much needs to be filled.

You can style the divs anyway you want. You likely want to style the inner div with background-color, or background-image & background-repeat. It can be a solid colour, a gradient, or a banded pattern, which seems to be rather popular.

Have you Google'd for jQuery plugins? They are fairly easy to find. Here's one for example: http://t.wits.sg/jquery-progress-bar/