javascript - How to Display Text along with JQuery Progressbar and forward to some other JSP page after completing? -


i have progress bar. t working fine need display text along progress bar & when reaches 100% should forward jsp page. program increases 10% & want print text like:

  • 10% -> uploading personal details
  • 20% -> checking email id.
  • 30% -> generating user id.
    ....
    , important after reaches 100% must forward some.jsp. how achieve this. please suggest. program:

    <html> <head>     <link rel="stylesheet" type="text/css" href="mystyle.css">     <script type='text/javascript'>        var progress = setinterval(function() {        var $bar = $('.bar');           if ($bar.width()==400) {            clearinterval(progress);            $('.progress').removeclass('active');          } else {            $bar.width($bar.width()+40);          }          $bar.text($bar.width()/4 + "%");        }, 800);     </script> </head> <body>    <script src="http://code.jquery.com/jquery.js"></script>    <script src="js/bootstrap.min.js"></script>    <div class="container">       <div class="progress progress-striped active">         <div class="bar" style="width: 0%;"></div>       </div>    </div> </body> </html> 

    in mystyle.css:

    @import url('css/bootstrap.css');  .container {   margin-top: 30px;   width: 400px; } 

you can redirection javascript using window.location.replace

window.location.replace("http://example.com/finishedloading"); 

you have keep track of progress, , depending on that, display message. once finished, redirect.

based on example:

<html> <head> <script type='text/javascript'>   var progress = setinterval(function() {     var $bar = $('.bar');      if ($bar.width()==400) {         clearinterval(progress);         $('.progress').removeclass('active');         window.location.replace("http://example.com/finishedloading");     } else {         $bar.width($bar.width()+40);         switch($bar.width()){             case 40: $("#status").html("uploading personal details"); break;             case 80: $("#status").html("checking email id"); break;             case 120: $("#status").html("generating user id"); break;              // other case statements...             case 400: $("#status").html("finished"); break;         }     }     $bar.text($bar.width()/4 + "%");   }, 800); </script> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <div class="container">    <div class="progress progress-striped active">        <div class="bar" style="width: 0%;"></div>    </div>    <br>    <span id="status"> </div> </body> </html> 

the progress here direct kept in $bar.width().


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -