How to create a progress bar which will change color in every 20% and time interval (milliseconds) until it is filled up?

Question

I want to create a progress bar in which user will enter interval. In every interval and 20% progress color of the bar should change.

For example: User inputs 100, then after every 100 ms, the bar will progress by 20% and its color will change, like starting with blue, then green, yellow, orange and finally red

I went to W3 schools and found something similar but it was not done in bootstrap and I want to use jQuery instead of JavaScript as well but I honestly don't have any idea how to start so I did not attach any JavaScript nor jQuery code as it is blank :(

  
    Start Temperature (Celcius) :
    
    End Temperature (Celcius) :
    
    Interval (ms):
    

    
  

  
    
      Start
    
    
      
        
      
    
    
      End

Thank you

user_12343069 · Answer

HTML

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

Sample Code: https://jsfiddle.net/zyfrbad6/

user_11461177 · Answer

Create an array of colors.

Increment the variable i everytime setTimeout is ran, increasing the width of the progress bar, and increasing the index of color_array. Once i has reached 5, exit the setTimeout function.

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

user_4082348 · Answer

Create timeout function that uses interval value to check progress value so if it is 20% add class with background color change, something like:

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

How to create a progress bar which will change color in every 20% and time interval (milliseconds) until it is filled up?

3 Answers