Блог

Я наткнулся на этот индикатор выполнения на этом сайте.

Что я хочу сделать, так это провести 3-минутный обратный отсчет и показать, сколько минут и секунд осталось. Поэтому вместо отображения процента я хочу отобразить оставшееся время.

Я использую следующий код:

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;
}
  

Вам нужно будет немного изменить эту функцию :

• Используйте 3 параметра ( timeleft , timetotal , element ) вместо 2 фактических
• Используйте setTimeout() для обновления индикатора выполнения каждую секунду
• Проверьте timeleft , чтобы узнать, нужно ли вам обновить индикатор выполнения

 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'));
  

Кроме того, вы должны добавить этот CSS, чтобы индикатор выполнения не переполнял контейнер :

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

Фрагмент:

 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>  

[Совет]

Если вы хотите, чтобы индикатор выполнения плавно и постоянно уменьшался, используйте вместо этого этот код :

 .animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear")