javascript - progressbar not appearing -

i have jquery ui progressbar acts timer. when open page, has "loading..." (added in html) , nothing else.

links files

html file: http://pastebin.com/re0zkvny

javascript file: http://pastebin.com/zyna5mny

i can't seem find wrong code. tried copy & pasting code jquery ui demos, nothing seems make work (with code.).

it seems you're doing few things wrong:

• you're trying use jquery ui progressbar widget yet you're setting progress bar's width using css (which manipulates usual html div element
• some of code executes , on ready event

this simplified example doesn't use jquery ui progress bar rather custom solution way use.

but let me modify code , move belongs:

// progressbar stuff $(function() {     /* don't need     $( "#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 seems you're doing in interval animate progress bar seems reasonable let jquery animation instead. , since you're incrementing progress bar every 75ms , takes 100 steps until load content, should run animation 7500ms then. makes progress bar run smoother.

$(function() {     // animate progress bar     $("#loading").width(0).animate(         {             width: "100%" // animate         },         75 * 100, // how long (100 steps per 75ms)         "linear", // how animate         function() { // afterwards             // replace own functionality             alert("load content");         }     ); });