Полоса прогресса html

Question

Всем привет. Пытаюсь сделать полосу прогресса.

Почему-то у меня работает неправильно, мне нужно чтобы остановилось на 9.2 Подскажите пожалуйста, как это сделать? Всем спасибо заранее

Всем спасибо, оба ответа рабочие

https://codepen.io/programmer005/pen/JjbqaEX

$('.start').click(function() {
// progressbar
    var progressbar = $('#progressbar'),
        max = progressbar.attr('max'),
        time = (100/max),
        value = progressbar.val();

    var loading = function() {
        value += 0.1;
        addValue = progressbar.val(value);

        $('.progress-value').html(value.toFixed(1));

        if (value == max) {
            clearInterval(animate);
        }
    };

    var animate = setInterval(function() {
        loading();
    }, time);
    return false;

});

.html5-progress-bar {
    padding: 15px 15px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
}
.html5-progress-bar progress {
    background-color: #f3f3f3;
    border: 0;
    width: 80%;
    height: 18px;
    border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-value {
    background: #cdeb8e;
    background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
    background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
    border-radius: 9px;
}
.html5-progress-bar progress::-moz-progress-bar {
    background: #cdeb8e;
    background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
    background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
    border-radius: 9px;
}
.html5-progress-bar .progress-value {
    padding: 0px 5px;
    line-height: 20px;
    margin-left: 5px;
    font-size: .8em;
    color: #555;
    height: 18px;
    float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-wrapper html5-progress-bar">
 <div class="progress-bar-wrapper">
 <br><br>
  <progress id="progressbar" value="0" max="9.2"></progress>
  <span class="progress-value">0.0</span>          
   </div>
</div>

<button class="start">start</button>

Answer 1

Это подводный камень из серии 0.1 + 0.2 = 0.30000000000000004

Вообще, если у вас есть цикл, который изменяя число, должен остановиться, когда оно достигнет до какого-то N, везде на всякий случай стоит использовать операторы <= и >= вместо ==

let x = 0.5;

while (true) {
  if (x >= 1) break; // Если заменить на x == 1, пойдет бесконечный цикл.
  
  x += 0.1;
  console.log(x);
}

.as-console-wrapper { min-height: 100vh !important }

И у вас, замена == на >= решает вопрос бесконечной анимации:

$('.start').click(function() {
  var progressbar = $('#progressbar'),
    max = progressbar.attr('max'),
    time = (100 / max),
    value = progressbar.val();

  var loading = function() {    
    value = Math.min(max, value + 0.1);
    // Пришлось добавить ограничитель, чтобы остановиться ровно на max
    
    addValue = progressbar.val(value);

    $('.progress-value').html(value.toFixed(1));
    
    if (value >= max) {
      // Даже при уверенности, что они будут равны, всё равно оставлю >=, страховка.
      clearInterval(animate);
    }
  };

  var animate = setInterval(function() {
    loading();
  }, time);
  return false;

});

.html5-progress-bar {
  padding: 15px 15px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
}

.html5-progress-bar progress {
  background-color: #f3f3f3;
  border: 0;
  width: 80%;
  height: 18px;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-value {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0);
  border-radius: 9px;
}

.html5-progress-bar progress::-moz-progress-bar {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0);
  border-radius: 9px;
}

.html5-progress-bar .progress-value {
  padding: 0px 5px;
  line-height: 20px;
  margin-left: 5px;
  font-size: .8em;
  color: #555;
  height: 18px;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-wrapper html5-progress-bar">
  <div class="progress-bar-wrapper">
    <br><br>
    <progress id="progressbar" value="0" max="9.2"></progress>
    <span class="progress-value">0.0</span>
  </div>
</div>

<button class="start">start</button>

Answer 2

if (value.toFixed(1) == max) {
    clearInterval(animate);
}

БЛОГ НА HUSL

Полоса прогресса html

Ответы (2 шт):