Question: Can I apply more circles on the same element, connected to each other in a kind of chain?

tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.

https://tigrr.github.io/circle-progress

MIT License

164 stars 43 forks source link

Question: Can I apply more circles on the same element, connected to each other in a kind of chain? #13

Closed p4535992 closed 2 years ago

p4535992 commented 2 years ago

Can I apply more circles on the same element, connected to each other in a kind of chain?

I currently have two circles: Circle X (outermost circle): 100/100 Circle Y (inner circle): 30/30

and I would like that by decrementing the total value 130 you would see circle Y decrease and when you reached 0 see the value on circle X decrease.

tigrr commented 2 years ago

You can layer two Circle Progresses one on top of the other. See this demo on jsfiddle. Note that you will have to increase the stroke width and font size of the inner circle so that it matches those of the bigger outer circle.

p4535992 commented 2 years ago

Wow ty for the fast response!