JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery-timer.googlecode.com/svn/trunk/jquery.timer.js"></script>
<div class="pr"></div>
<div class="prspan"></div>
CSS
.pr{height: 20px;background-color:red};
JavaScript
var $progressBar = $(".pr"), $legend = $('.prspan');
count = 0, last_time = 10, laster = 0,
ticks = 100, prc = 0, dt = ticks / last_time,
timer = $.timer(function() {
count++;
prc = (((count/60) * 100) / (ticks/60)).toFixed(0);
$progressBar.css({width: prc + "%"});
laster = last_time - Math.round(count / dt);
$legend.html(prc + ' %' + ' - <i style="font-size:70%;">' + "(" + laster + " сек)</i>");
if (count >= ticks) {
timer.stop();
}
});
timer.set({ time : 1000 / dt, autostart : true });