Как создать индикатор выполнения, который будет менять цвет через каждые 20% и временной интервал (миллисекунды) до его заполнения?

Question

Я хочу создать индикатор выполнения, в котором пользователь будет вводить интервал. В каждом интервале и 20% цвет индикатора должен меняться.

Например: пользователь вводит 100, затем через каждые 100 мс полоса будет прогрессировать на 20%, а ее цвет будет меняться, как начиная с синегозатем зеленый, желтый, оранжевый и, наконец, красный

Я пошел в школы W3 и обнаружил нечто подобное, но это не было сделано в начальной загрузке, и я хочу использовать jQuery вместо JavaScript, но, честно говоря, у меня нетЛюбая идея, как начать, чтобы я не приложил ни JavaScript, ни код JQuery, поскольку он пуст: (

  <form class="form">
    <label for="start" class="mr-3 ml-3">Start Temperature (Celcius) :</label>
    <input class="form-control mr-2 ml-3" type="number" id="start" />
    <label for="end" class="mr-3 ml-3">End Temperature (Celcius) :</label>
    <input class="form-control mr-2 ml-3" type="number" id="end" />
    <label for="interval" class="mr-3 ml-3">Interval (ms):</label>
    <input class="form-control mr-2 ml-3" type="number" id="interval" />

    <button id="click" class="btn btn-danger ml-3 mt-3" type="button" onclick="move()">Start</button>
  </form>

  <div class="row">
    <div class="text-right col-2 mt-3">
      <p>Start</p>
    </div>
    <div class="col-8">
      <div id="progress" class="progress mt-3 ">
        <div id="bar" class="progress-bar"></div>
      </div>
    </div>
    <div class="col-2 mt-3">
      <p>End</p>
    </div>
  </div>
</div>

Спасибо

Answer 1

Создать массив цветов.

Увеличивать переменную i каждый раз, когда запускается setTimeout, увеличивая ширину индикатора выполнения и увеличивая индекс color_array. Как только я достиг 5, выйдите из функции setTimeout.

$(function() {

  var color_array = [
    {col: 'blue'},
    {col: 'green'},
    {col: 'yellow'},
    {col: 'orange'},
    {col: 'red'}
  ];

  var int = 100;
  var col = -1;
  var bar = $('.bar-progress');
  var i = 0;

  timer = function() {
    i++;
    bar.css({
      'width': (i * 20) + '%',
      'background': color_array[i - 1]['col']
    });
    if (i == 5) {
      return;
    }
    setTimeout(timer, int);
  }

  timer();


});

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.bar-progress {
  height: 100%;
  width: 0%;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
  <div class="bar-progress"></div>
</div>

Answer 2

HTML

<input type="number" id="interval" placeholder="Enter Interval e.g (200)"/>
<button class="startBtn">
    start
</button>
<div class="container">
    <div class="bar">
        <div class="bar-progress"></div>
    </div>
</div>

CSS

.container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 50px;
}
.bar{
  width: 100%;
  height: 30px;
  border: 1px solid #f7f7f7;
  border-radius: 20px;
  overflow:hidden;
}
.bar .bar-progress{
  width: 0;
  height: 100%;
  background: blue;
  display:flex;
  justify-content: center;
  align-items: center;
}

JS

let i = 1;
let interval;
let progress = $('.bar-progress');
$('.startBtn').on('click', function(){
   $('.bar-progress').css({
     'width': '0px'
   });
   interval = $('#interval').val();
   pause();
});
  pause = function() {
   i++;
   let bgColor = getRandomColor();
   $('.bar-progress').css({
     'width': (i * 20) + '%',
     'background': bgColor,
   })
   .html((i * 20) + '%');

   if (i == 5) {
     i = 1;
     return;
   }
   setTimeout(pause, interval);
 }
 function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Пример кода: https://jsfiddle.net/zyfrbad6/

Answer 3

Создать функцию тайм-аута, которая использует значение интервала для проверки значения прогресса, поэтому, если он равен 20%, добавьте класс с изменением цвета фона, например:

setTimeout(function(){ 
    checkProgressBar();
 }, 3000);//use interval value
 
 
 function checkProgressBar(){
     //remove color classes added before
 
    // if progress bar value is 20% change color
    document.getElementById('progress-bar').classList.add('red');
    // if progress bar value is 40% change color
     document.getElementById('progress-bar').classList.add('green');
     //etc..
 }

.green{
  background: green;
}

.red{
  background: red;
}

<div id="progress-bar">