Progress ring's indeterminate animation doesn't work well at smaller sizes

[knd775]

Current Behavior

The ring disappears for some time each loop. This example is with size-4

Recording.2024-11-20.140833.mp4

Expected Behavior

No response

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@knd775 Ben just FYI I did take a look at this yesterday. I agree the animation doesn't work well at the small size. The issue is our default animation defined here:

https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/extends/animations.ts#L15

The way these components work, is by using an SVG circle and animating the stroke like so:

https://css-tricks.com/svg-line-animation-works/

So it's not a fill like a progress bar between 0-100%, but actually a single portion of a dashed line stretched for the entire stroke's length. As such, it's not dynamic. Meaning as the size of the circle grows and shrinks it should be a relatively larger/smaller value. Where as right now we have a fixed value.

This does scale somewhat - just not to the extremes, so what I might do is create a few variations of this and use responsive breakpoints to swap between. That is unless I can come up with a better way to accomplish this and still allow users to replace the animation if desired.