JSFiddle - React, Tailwind, and code Playground

by Dmitriy Khristoev

HTML

<script src="http://jquery-timer.googlecode.com/svn/trunk/jquery.timer.js"></script>
<div class="progress-timeout">
    <div class="progress-timeout-line"></div>
    <div class="progress-timeout-info"></div>
</div>

CSS

.progress-timeout {
	position: absolute;
	width: 100%;
	height: 16px;
	background: rgba(168,159,134,.5);
	overflow: hidden;
	top: 0;
}
.progress-timeout-line {
	position: absolute;
	width: 0%;
	height: 100%;
	background: #a89f86;
	z-index: 100;
	transition: width 0.3s linear;
}
.progress-timeout-info {
	position: absolute;
	text-align: center;
	height: 100%;
	width: 100%;
	z-index: 200;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 2px 2px rgba(0,0,0,.75);
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
.progress-timeout-info span {
	display: none;
}

JavaScript

var $progressBar = $(".progress-timeout-line"), $legend = $('.progress-timeout-info'), url = "";
                count = 0, last_time = 30, 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('<span>' + prc + ' %' + ' -</span>' + "осталось " + laster + " сек");
                    //if (count >= ticks) {
                    if (ticks - count <= 0) {    
                        timer.stop();
                        $(location).attr('href',url);
                    }
                });
            timer.set({ time : 1000 / dt, autostart : true });