Question

I have this AJAX loader, created using CSS.

And I m trying to increase the % loading that it shows by 10% for every 1 second, so that the user can see some progress.

I m using this setTimeout function to invoke it every 1 second.

Here’s the function and the Fiddle:

$(document).ready(function() {

    var increase = 10;
    setTimeout(function() {
        increase = increase + 10;
        $("#result").html("<div class='progress progress-striped active' style='width :300px; margin:0 auto;'><div class='bar' style='width: " + increase + "%;'></div></div>");
        if (increase == 100) {
            increase = 10;                
        }

    }, 1000);

});​

Answer 1

To repeat a function call, you need setInterval, not setTimeout.

The syntax is the same, so you just have to change this token.

But in this case you’re lying to the user (probably acceptable) and you’re doing the work of some existing jquery functions like animate.