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.