How to change color gradient speed?

[AdeeelAsif]

Hi,

this is my code :

var bar = new ProgressBar.Line(CpuES, {
    strokeWidth: 6,
    color: '#FFEA82',
    trailColor: '#eee',
    trailWidth: 1,
    easing: 'bounce',
    duration: 4500,
    svgStyle: null,
    text: {
      value: '',
      alignToBottom: true
    },
    from: {color: '#00FF00', width: 2},
    to: {color: '#FF0000', width: 2},
    // Set default step function for all animate calls
    step: (state, bar) => {
      bar.path.setAttribute('stroke', state.color);
      var value = Math.round(bar.value() * 100);
      if (value === 0) {
        bar.setText('');
      } else {
       
        bar.setText(CpuAverageFD+'% cpu front');
      }
  
      bar.text.style.color = state.color;
    }
  });
  bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  bar.text.style.fontSize = '15px';
  bar.text.style.position='relative';
  bar.text.style.top='15%';
  bar.text.style.fontWeight='bold';
  bar.animate(CpuToDisplayFD);  // Number from 0.0 to 1.0

The color gradient works perfectly, however the progress bar become red (FF0000) very fast... around 30% (bar.animate(0.3)

How can I change the speed of the gradient?