Quiero crear una barra de progreso en la cual el usuario ingresará el intervalo. En cada intervalo y progreso del 20%, el color de la barra debe cambiar.

Por ejemplo: el usuario ingresa 100, luego cada 100 ms, la barra progresará en un 20% y su color cambiará, como comenzar con azul, luego verde, amarillo, naranja y finalmente rojo

Fui a las escuelas W3 y encontré algo similar, pero no se hizo con bootstrap y quiero usar jQuery en lugar de JavaScript también, pero honestamente no tengo idea de cómo comenzar, así que no adjunté ningún código JavaScript ni jQuery como está en blanco :(

  <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>

Gracias

2
Abdullah Omar 21 oct. 2019 a las 18:07

3 respuestas

La mejor respuesta

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;
}

Código de muestra: https://jsfiddle.net/zyfrbad6/

2
Ahsan Tanveer 8 nov. 2019 a las 13:30

Cree una función de tiempo de espera que use el valor de intervalo para verificar el valor de progreso, por lo que si es 20%, agregue clase con cambio de color de fondo, algo como:

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">
1
kajdzo 2 feb. 2020 a las 22:19

Crea una variedad de colores.

Incremente la variable i cada vez que se ejecute setTimeout, aumentando el ancho de la barra de progreso y aumentando el índice de color_array. Una vez que llegue a 5, salga de la función 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>
2
Souleste 22 oct. 2019 a las 14:49