Is it possible to fill the bar with one color at each fill percentage?

[AugustoMarcelo]

I have a bar with 180 in size and would like to fill it with 4 colors, one being every 25% fill. I tried to do it this way, but some colors take up more space than others and in addition they repeat themselves.

$('.progress-bar').circleProgress({
  value: .60,
  size: 180.0,
  startAngle: Math.PI*1.5,
  fill: {
    //color: 'rgb(250,250,250)'
    gradient: ['#e74c3c', '#e67e22', '#f1c40f', '#27ae60'],
    gradientAngle: Math.PI*1.5
  },
  emptyFill: 'rgba(200,200,200, 0.2)',
  animation: {
    duration: 3000
  },
  lineCap: 'round'
}).on('circle-animation-progress', function(event, progress) {
  $(this).find('strong').html(
    Math.round((100 * progress)*$(this).circleProgress('value')) + '<span>%</span>'
  );
});

[kottenator]

Is #56 what you're looking for?:

[AugustoMarcelo]

Almost this, but with a gradient color change. See, in the figure below, that the desired effect is produced up to 50%. But after that, the colors repeat themselves.

[kottenator]

The only way to do this is via image fill, because currently <canvas> doesn't support conical gradient fill.

See #73, especially this comment with an example.

[AugustoMarcelo]

I got an effect similar to what I wanted using image. I had to use lineCap: 'butt', because 'round' did not work as I would have liked. Thanks!