создать полосу загрузки, используя динамическое значение c

Question

Я хочу создать панель загрузки / индикатор выполнения, который загружается при увеличении значения (var). Я не могу понять, как это сделать go. У меня есть инструменты. например, значение изменения Dynami c, извлеченное из моей базы данных Firebase, которое увеличивается на основе определенного действия. однако я не уверен, как go создать этот индикатор выполнения и как загрузить его на основе возрастающего значения динамического c.

Любые советы?

Answer 1

Если вы не возражаете против использования JQuery, попробуйте использовать JQuery UI Progressbar Widget . Сначала необходимо добавить библиотеку пользовательского интерфейса JQUERY на свой веб-сайт с помощью тега <script> в заголовке:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>

Затем инициализировать индикатор выполнения с максимальным значением; если вы хотите использовать проценты, это должно быть 100.

$("#progressbarElementID").progressbar({
  max: 100
});

Затем обновите, написав проценты:

$("#progressbarElementID").progressbar({
  value: 74   // Or whatever percent you want...
});

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

Более подробное руководство вы можете найти в документации API для этой функции .

Answer 2

Вы можете использовать что-то вроде ниже:

function increaseWidth(percent) {
  let containerWidth = document.getElementById('progressBarContainer').clientWidth;  // get the container width
  let amount = Math.round(containerWidth * percent/100);      // get amount of pixels the bars width needs to increase
  let barWidth = document.getElementById('bar').offsetWidth;  // get the current bar width
  
  // if the bar width + amount of pixels to increase exceeds the container's width, reduce it accordingly
  if(barWidth + amount > containerWidth) {  
    amount = containerWidth - barWidth;
    clearInterval(bar);     // we reached 100% so clear the interval
  }
    
  let totalPercent = Math.round((barWidth + amount) * 100/ containerWidth); // calculate the total percent finished
  
  document.getElementById('bar').style.width = barWidth + amount + "px";    // increase bar width
  document.getElementById('text').innerHTML = totalPercent + "%";           // update the percentage text
}

// this is just to mimic generating "work done" percentage
var bar = setInterval(function() {
  let percentage = Math.floor(Math.random() * 10 + 1); // generate a percentage of work done
  increaseWidth(percentage);
}, 1000)

#progressBarContainer {
  position: relative;
  float:left;
  width: 200px;
  height: 20px;
  border: 1px solid #09f;
  background-color: #000;
}

#bar {
  position: relative;
  float:left;
  width: 0;
  height: 20px;
  background-color: #f00;
}

#text {
  position: absolute;
  height: 20px;
  width: 200px;
  top: 0px;
  left: 0px;
  color: #fff;
  text-align:center;
  line-height:20px;
}

<div id="progressBarContainer">
  <div id="bar">
    <div id="text"></div>
  </div>
</div>