Question

I have a jQuery UI progressbar that acts as a timer. However when I open the page, all it has is "Loading…" (added in html) and nothing else.

Links to files

HTML file: http://pastebin.com/Re0ZKVNY

Javascript file: http://pastebin.com/zynA5MnY

I can’t seem to find anything wrong with the code. Tried copy & pasting code from the jQuery UI demos, but nothing seems to make it work (with my code.).

Answer 1

It seems that you’re doing a few things wrong:

• you’re trying to use jQuery UI Progressbar widget yet you’re setting your progress bar’s width using CSS (which actually manipulates usual HTML DIV element
• some of your code executes immediately and some on ready event

This is some simplified example that doesn’t use jQuery UI Progress bar but rather a custom solution the way that you actually use.

But basically let me also modify you code and move everything where it belongs:

// Progressbar Stuff
$(function() {
    /* don't need this
    $( "#loading" ).progressbar({
        value: 0
    });
    */

    //increment progressbar
    var loading = $('#loading');
    width = 0; //loading.width();

    var interval = setInterval(function() {

        width++;
        loading.width(width + '%');

        if (width >= 100) {
            clearInterval(interval);
            loadContent();
        }
    }, 75);


    // Fade Out, load content, fade in.
    function loadContent() {
      $("#loadcontent").fadeOut("slow", function(){
        $("#content").load("./content/main.html",false, function() {
          $("#content").fadeIn("slow");
        });
      })
    }

});

Alternative

Since it seems that all you’re doing in your interval is animate progress bar it seems reasonable to just let jQuery do the animation instead. And since you’re incrementing your progress bar every 75ms and it takes 100 steps until you load content, you should run your animation for 7500ms then. It also makes progress bar run smoother.

$(function() {
    // animate progress bar
    $("#loading").width(0).animate(
        {
            width: "100%" // animate what
        },
        75 * 100, // for how long (100 steps per 75ms)
        "linear", // how to animate it
        function() { // what to do afterwards
            // replace with your own functionality
            alert("Load content");
        }
    );
});