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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.