CODEWITHSUNDEEP
javascriptjqueryhtmlcssprogress-bar
Daniel
Daniel

Reputation: 81

Why does my progress bar shows full progress value before it start loading

I made a progress bar using jQuery UI. here is the link to see it: DEMO

It works well, just there is a problem. At the code I have setTimeout( progress, 2000 ); which means it has to wait 2 seconds before it stars. But during this time it shows the background of .ui-progressbar-value which must be visible when the whole progress is completed. After 2 seconds it hides and to progress stars as normal.

Interestingly when I tried it on JSFiddle, it did not show this class and worked perfectly. So in browsers only have this problem. Here is the JSFiddel link

and this is my js code:

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }

    }

    setTimeout( progress, 2000 );
  });

And CSS:

.enterance{
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
    background-color:black;
    width:100%; 
    height:100%;
    z-index:10;
    color:rgba(255,255,255,1.00);
}
.enterance .loader{
    position:absolute;
    width:600px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -300px;
}
.ui-progressbar-value {
    background:url(http://goo.gl/V9dAfn) no-repeat;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar{
    background:url(http://goo.gl/rBH0N1) no-repeat;
    background-size:cover;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar .ui-progressbar-value{margin:0;}
.progress-label{
    font-size:90px;
    font-family: 'News Cycle', sans-serif;
    color:#FFFFFF; 
    right:0px; 
    position:absolute;
}

So how can I NOT show this .ui-progressbar-value while it's waiting for 2 seconds? And Additionally, how can I add a fadeIn effect to this? like when page loads the image fades in ?

Thanks in advance.

Upvotes: 0

Views: 1531

Answers (2)

bits
bits

Reputation: 8340

Try this (can't be sure unless you had a fiddle of the issue):

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }
    }

    progressbar.progressbar( "value", 0 );
    setTimeout( progress, 2000 );
  });

Upvotes: 1

Nevin
Nevin

Reputation: 3306

Try removing the "$(function()" and running just the plain code? 

var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }

    }

    setTimeout( progress, 2000 );

Cant really work on it cuz it doesnt affect the fiddle right?

Upvotes: 0

Related Questions