I have been using Javascript almost as long as I have used the Internet , but only resently started to learn the language. So i have experient that JavaScript is a quit funny language to work with, specialy with the new more capable browsers.

The JavaScript language has not mutch in common with the  java language. But it is inded a Object Oriented Language. Read more on http://www.crockford.com/javascript/

see the demo here: 

I have made a little class that represent a div element. To make the html code more clean, I use
document.createElement("div"), so i dont have to place the div tag in the html code.

<script type="text/javascript">
    function Progress (id, height, speed)
    {
        this.id = id;
        this.height = height || 6;
        this.speed = speed || 4;
        var elm = document.createElement("div");
        elm.style.position = "absolute";
        elm.style.background = "blue";
        elm.style.border = "1px black solid";
        elm.show = function() { this.style.display = "block"; };
        elm.hide = function() { this.style.display = "none"; };
        elm.hide();

        this.stop = function() {  go = false;}

        this.process = function() 
        {
            counter += this.speed;
            counter <= this.width ? '' : counter = 0;
            elm.style.width = counter + "px";

            if(go == false || eval(this.event)) {
                clearInterval(this.interval);
                this.stop();
                elm.hide();
            }
        }

        this.start = function(top_pos, left_pos, width, event) 
        { 
            clearInterval(this.interval);
            this.event = event
            this.width = width;

            var mybody = document.getElementsByTagName("body").item(1) || document.body;
            mybody.appendChild(elm);

            elm.style.top = top_pos + "px";    elm.style.left = left_pos + "px";
            elm.style.width = "0";    elm.style.height = this.height + "px";
            elm.show();

            go = true;
            counter = 0;
            this.interval = setInterval(this.id + ".process()",10); 
        }
    }

</script>
  

 with the progress class in place in can initialize a new progress object - new Progress("progress_div",15,3)
And i can start the progressbar with: progress_div.start(15, 100, 400, "stop==true") //top_pos, left_pos, width, event

I this case i use a button to stop the progressbar, but i could as well be an Image download ( myimage.complete == true)
as it is used here http://codebehind.dk/scale_crop/edit/12

 <script language="javascript">
var stop = false
var progress_div = new Progress("progress_div",15,3);        

function toggle()
{    btn = document.getElementById("btn");

    if(btn.value=="Start")
    {
        progress_div.start(15, 100, 400, "stop==true");
        btn.value = "Stop";
    }
    else
    {
        btn.value = "Start";
        progress_div.stop();
    }
}

</script>

<input id="btn" type="Button" onclick="toggle();" value="Start">