Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing a time countdown progress bar

Tags:

jquery

css

I came across this progress bar code on this site.

What I want to do is, have a 3 minute countdown and show how many minutes and seconds are left. So rather than displaying percentage I want to display time left.

I use the following code:

JS

progress(100, $('#progressBar')); // This is what the timer should update each second

function progress(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + " minutes/seconds to go");
};

HTML

<div id="progressBar">
  <div></div>
</div>

CSS

 #progressBar {
  width: 923px;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
}
like image 364
Elton Avatar asked Jul 02 '14 12:07

Elton


People also ask

What is countdown function on timer?

A countdown timer can be defined as a virtual clock that counts down from a certain date or number to indicate the end or beginning of an offer or event.

What is progress bar in bootstrap?

A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. A default progress bar in Bootstrap looks like this: 70% Complete.


1 Answers

You'll need to change a bit this function :

  • Use 3 parameters (timeleft, timetotal, element) instead of the 2 actual
  • Use setTimeout() to refresh your progress bar every second
  • Check timeleft to know if you need to refresh the progress bar
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element
        .find('div')
        .animate({ width: progressBarWidth }, 500)
        .html(timeleft + " seconds to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));

Plus, you should add this CSS, to avoid your progress bar to overflow its container :

#progressBar div {
  box-sizing: border-box;
}

Snippet:

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(timeleft + " seconds to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));
#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div></div>
</div>

[Tip]

If you want your progress bar to smoothly and constantly decrease, use this code instead :

.animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear")
like image 171
zessx Avatar answered Oct 11 '22 20:10

zessx