I'm a beginner with Javascript and wanted to ad just a little text based fake progress bar to my site.

Here's what i tried:

function progbar(){
    document.getElementById("bar").innerHTML = "Ladevorgang: ";
        for (var i = 0; i<100; i++)
    {
        adprogress();
        sleep(50);
    }
    //document.getElementById("bar").innerHTML = "";
}
function adprogress(){
document.getElementById("bar").innerHTML += "|";
}
function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

The problem is it doesn't do this:

Ladevorgang:|

Ladevorgang:||

Ladevorgang:|||

Ladevorgang:||||

and so on

it just waits and then shows the complete thing.

Is this just how Javascript works or is there something i dont see?