Geek asks and answers

Progress Page

My client wants to have a progress bar on the initial page load. And the moment the page loads to hide it. So I thought about it and came up with it.

var num = 0,
    progress = $('.progressbar'),
    interval = setInterval(function(){
        num++
        progress.text(num+'%')
    }, 100);

$(window).load(function(){
    clearInterval(interval);
    $({number: num}).animate({number: 100}, { 
      duration: 1000,
      easing:'swing', 
      step: function() { 
          progress.text(Math.round(this.number)+"%");
      }
    })
})

Demo (I added a large image to show the download)

The only thing I can think of is to reduce the likelihood that a number reaches 100 before dom loadadding a few if, to check if the number is, for example, 50%, and reduces the repeating value of the interval, and the same thing by 75%, I I think, but I do not think this is very smart.

Pretty much my question is: "Is there a smarter way to do this?"

+3
source share
1 answer

, , jQuery.

Code Academy FIDDLE.

JS

var mybar = $(".progressbar").progressbar({value: 1});

var progress = setInterval(function() {
                                       updateprog();
                                       }, 10
                          );

function updateprog ()
{
      var currentVal = $(".progressbar").progressbar("option", "value");
       var nextVal = currentVal + 1;
       if (nextVal > 100)
          {
           $(mybar).hide();
           clearInterval(progress);
           } else
          {
           $(".progressbar").progressbar({value: nextVal});
           }
}

, .

+1

More articles:


All Articles