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()
.