Редактировать прогресс бар. Добавление дополнительных элементов в виде div или любой другой

Question

У меня есть прогресс бар в самом обычном виде:

<progress id="file" max="100" value="70"> 70% </progress>

Можно ли создать прогресс бар в таком формате:

Этот блок должен следовать за прогрессом и выводить число процентов

Answer 1

Там есть range подёргай за него ... если кастомные теги не хочешь можешь изменить на div

Если надо объяснения то спроси я отвечу

let range = document.querySelector("#range");
let line = document.querySelector("line");
let info = document.querySelector("info");

range.oninput = function() {
  line.style.width = this.value * 6 + "px";
  info.innerHTML = this.value + "%";
};

wrap,
line,
info {
  display: block;
}

wrap {
  width: 600px;
  height: 10px;
  background: blue;
  border-radius: 10px;
  margin: 70px auto;
  position: relative;
}

line {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background: red;
  border-radius: 10px 0 0 10px;
}

info {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  transform: translateX(50%);
}

<wrap>
  <line>
    <info>10%</info>
  </line>
</wrap>

<input type="range" min="0" max="100" value="10" id="range">

let line = document.querySelector("line");
let info = document.querySelector("info");

range.oninput = function() {
  line.style.width = this.value + "px";
  info.innerHTML = parseInt(this.value / 3) + "%";
};

wrapper,
line,
info {
  display: block;
}

wrapper {
  position: relative;
  width: 300px;
  height: 40px;
  background: #ccc;
  border-radius: 40px;
  box-shadow: 0 0 10px #000;
  margin-top: 60px;
}

line {
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  background: #0576fb;
  border-radius: 40px;
}

info {
  background: #000;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -50px;
  right: -20px;
}

<wrapper>
  <line>
    <info>70%</info>
  </line>
</wrapper>

<br>
<br>
<br>
<br>
<input type="range" id="range" min="40" max="300" value="210">

БЛОГ НА HUSL

Редактировать прогресс бар. Добавление дополнительных элементов в виде div или любой другой

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