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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.