Here's a simple recipe for creating your own progress bar using some javascript and css. This is what I implemented on my Rand() page.
<script type="text/javascript"> $(document).ready(function() { function progress(n) { (function loop() { $('#progress-bar').html(n ? n*10 : ""); $('#progress-bar').css("width", n*10 + '%'); if (n--) { setTimeout(loop, 100); } else { // do something } })(); } progress(10); }); </script>
In order to make it work, place a div somewhere on your page where you want the progress bar to appear.
<div id="progress-bar"></div>
I added some styling to make the progress bar look a bit more professional.
#progress-bar { background-color: #2A83A2; background-image: linear-gradient(#2A83A2, #165E83); border-color: #165E83; height: 20px; }
Here's a demo you can try out for yourself.