Angular 1 and Angular 2 Integration

JavaScript countdown timer progress bar

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>




ANIL SINGH

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

JavaScript countdown timer progress bar JavaScript countdown timer progress bar Reviewed by Anil Singh on 10:47 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^