The Table of Content
for countdown timer.
1.
The
JavaScript Code
2. The HTML Code
3. The CSS Code
JavaScript code-sample.
//PROGRESS
BAR TIMER METHOD.
var progressTimer = function (timeleft, timetotal, $element) {
var progressTimerBarWidth = timeleft * $element.width() /
timetotal;
$element.find('div').animate({ width:
progressTimerBarWidth }, 1000).html(timeleft + "
seconds left..");
if (timeleft > 0) {
setTimeout(function () {
progressTimer(timeleft - 1,
timetotal, $element);
}, 1000);
} else {
}
};
//CALL PROGRESS
BAR DISPLAY TIMER.
progressTimer(timelefts, expiredTimeSpan,
$('#div-progressBar'));
HTML code-sample.
<div id="div-progressBar">
<div></div>
</div>
CSS code-sample.
<style>
#div-progressBar {
width: 90%;
height: 22px;
background-color: #159f9e;
}
#div-progressBar div {
height: 100%;
text-align: right;
width: 0;
background-color: #ffcc07;
box-sizing: border-box;
}
</style>
For more demo go to
link http://www.jqueryscript.net/tags.php?/countdown/