Cоздание progress bar на JS с отображением прогресса на странице

Question

Делаю практику на курсе по js и по заданию нужно сделать функцию прогресс с параметром тайм, которая за заданное время изменяет размер дива, использую scaleX, с отображением процента на странице. Сделала пока так, но когда добавила процент див стал заполняться в разы быстрее и выходит за пределы страницы. Подскажите, что не так.

/* Добавлено для визуализации в сниппете */
const div = document.querySelector('.progress-bar');
const timeEl = document.getElementById('time');
/* ===================================== */
  
function progress(time) {
  let startPoint = 0;
  div.style.transform = 'scaleX(0)';
  let speed = time / 31;
  let timer = setInterval(() => {
    if (startPoint > 31) {
      clearInterval(timer);
    } else {
      div.style.transform = `scaleX(${startPoint})`;
      timeEl.textContent = `${(startPoint / 31) * 100} %`;
    }

    startPoint++;
  }, speed);
}

/* запуск */ 
progress(time);

*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(227, 227, 207);
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.progress-bar {
  max-width: 500px;
  height: 20px;
  padding: 5px;
  background-color: rgb(128, 128, 195);
  transition: transform ease-in-out .5s;
  transform-origin: left;
}

<div class="container">
  <div class="progress-bar"></div>
  <span id="time"></span>
</div>

Answer 1

scaleX, чтобы объект принял установленные размеры, должен быть не более 1. Код должен быть такой: div.style.transform = scaleX(${startPoint / 31}); Но я бы посмотрел в сторону идеи, которая используется в построении progress. Там используется такое свойство, как inlineSize

/* Добавлено для визуализации в сниппете */
const div = document.querySelector('.progress-bar');
const bar = document.querySelector('.bar');
const timeEl = document.getElementById('time');
/* ===================================== */
  
function progress(time) {
  let startPoint = 0;
  bar.style.inlineSize = '0%';
  let speed = time / 31;
  let timer = setInterval(() => {
    if (startPoint > 31) {
      clearInterval(timer);
    } else {
      //div.style.transform = `scaleX(${startPoint / 31})`;
      bar.style.inlineSize = `${(startPoint / 31) * 100}%`;
      timeEl.textContent = `${parseInt((startPoint / 31) * 100)}%`;
    }

    startPoint++;
  }, speed);
}

/* запуск */ 
document.querySelector('button').addEventListener('click', (e) => {
  progress(10000); 
});

*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(227, 227, 207);
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.progress-bar {
  min-width: 500px;
  height: 20px;
  padding: 5px;
  box-shadow: 0 0 1px #000;
}

.bar {
  width: 100%;
  height: 100%;
  background-color: rgb(128, 128, 195);
  inline-size: 0%;
}

<div class="container">
  <div class="progress-bar"><div class="bar"></div></div>
  <span id="time">0%</span>
  <button>ПУСК</button>
</div>

БЛОГ НА HUSL

Cоздание progress bar на JS с отображением прогресса на странице

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