Показать сообщение отдельно
  #1 (permalink)  
Старый 23.08.2016, 09:45
Новичок на форуме
Отправить личное сообщение для WhatIsJavaScript Посмотреть профиль Найти все сообщения от WhatIsJavaScript
 
Регистрация: 23.08.2016
Сообщений: 4

Не увеличивается ширина блока через style.width
Хочу нарисовать прогресс бар, ширина которого с течением времени постепенно увеличивается.
<div id="progressBar" class="progress-bar"></div>

CSS:
Код:
.progress-bar {
  width: 0;
  height: 20px;
  background: red;
}
Пример я упростил. В оригинале значение step юзер может изменять и в зависимости от этого прогресс бар будет "наполняться" быстрее или медленнее. Сейчас споткнулся на том, что значение ширины прогресс бара увеличивается только один раз (первый), а дальше - не хочет. Почему?.
var valueX = 1000; // некое абстрактное пороговое значение
var valueCurrent = 0;
var progressBar = document.getElementById("progressBar");

// через определенные промежутки времени увеличиваем ширину
setInterval(function() {
  if (valueCurrent <= valueX) {
    var step = 20;
    var per = step / valueX;
    valueCurrent += step;
    progressBar.style.width += per * 100 + '%';
    // в консоли выводится 2%
    console.log(progressBar.style.width);
  }
}, 3000);

https://jsfiddle.net/wpx1xy62/6/
Ответить с цитированием