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/
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|