python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions