How to get a multicolor progressbarjs circle ?

Hello,

I'm using the progressbarjs package and I'd like to get a multicolor circle from color 1 via color 2 via color 3 to color 4.

https://progressbarjs.readthedocs.io/en/latest/api/parameters/

const doughnut = new ProgressBar.Circle(this.$refs.doughnut, {
    color: '#3be4ff',
    strokeWidth: 10,
    easing: 'easeInOut',
    from: {
        color: '#3be4ff', // color 1
    },
    to: {
        color: '#ce8dff', // color 4
    },
    step: function(state, shape, attachment) {
        shape.path.setAttribute('stroke', state.color);
    },
});

doughnut.animate(1);

This code only changes the color of the entire cirle, I mean the circle is of one unique color changing during the animation.

But I want to see a gradient of colors on the final circle.

I had the idea to have a color gradient on a div under the circle and then animate the circle with a transparent color, but I really don't know how to do.

And perhaps there is an easier way to do what I need ?

Thanks a lot for your help.

V