Circular progress multiple colors

[cleveradvertising]

Hello its possible create a circle with multiple colors and a correct percentage?

 

 

i see that example 

 

 

and what i want its like this image i put in attach.

 

Thanks.

See the Pen doXdbj by GreenSock (@GreenSock) on CodePen

[Carl]

I don't think there is a really easy or straightforward way.

 

I'm not sure if those colored arcs are arbitrary lengths or if they represent individual or groups of assets that are loading so its really hard to advise properly.

 

i suspect you could have multiple circle strokes for each color and use DrawSVG to position them and animate them all correctly.

 

The easiest thing to do would be to have the artwork you have covered by a stroke that acts as a mask. as you grow the mask, you reveal the multi-colored stroke beneath it.

 

In this demo there is an S with a brush stroke, a stroke mask on top of it is animated to reveal the stroke:

http://codepen.io/GreenSock/pen/YwawOX

[cleveradvertising]

ok thanks