Add: Animated Circular Progress Bar

[bn-l]

Hi there, great work on this one. Any plans to add the circular progress bar?:

https://magicui.design/docs/components/animated-circular-progress-bar

[shyakadavis]

Hi;

Worked on something similar-ish. Leaving it here for consideration/inspiration, but it needs more work if it is to reach the level from MagicUI.

• https://geist.shyakadavis.me/gauge
• https://github.com/shyakadavis/geist/blob/main/src/lib/components/ui/gauge/gauge.svelte

Cheers.

[bn-l]

Thanks

Hi;

Worked on something similar-ish. Leaving it here for consideration/inspiration, but it needs more work if it is to reach the level from MagicUI.

• https://geist.shyakadavis.me/gauge
• https://github.com/shyakadavis/geist/blob/main/src/lib/components/ui/gauge/gauge.svelte

Cheers.

Thanks for the link. Interesting to see Geist being implemented for svelte as well!

It's arguably small but what I love about magic's implementation is these little breaks in the circle. Something about it is very satisfying.

[shyakadavis]

Yes indeed. It eludes me still (https://github.com/shyakadavis/geist/issues/34), and I am yet to figure out how to add those gaps between arcs. 😅

But thanks for sharing. I didn't know they had this version as well.

[SikandarJODD]

Hi there, great work on this one. Any plans to add the circular progress bar?:

https://magicui.design/docs/components/animated-circular-progress-bar

Added : Animated Circular Progress bar Component : https://animation-svelte.vercel.app/magic/circular-progress-bar

[SikandarJODD]

[SikandarJODD]

i tried using spring, tweened to increment the value of value you can try out different methods to increment the value

[bn-l]

Looks perfect