Support for `indeterminate` prop with `<Progress radial />`

[jerefrer]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Hi again :)

I wanted to have a spinner shown while loading the page, and though I could use the <Progress radial indeterminate /> but had to dive in the code to realize that it is only supported by Progress bars.

We could specify this limitation in the doc, but it would be just as quick to add a CSS animation for the radial one.

For now I added the following to my svelte component. The effect is not exactly "spinner-like" but good enough for now while I'm prototyping my app.

<Progress value={15} radial indeterminate type="info" />

<style>
:global(.stwui-progress-radial) {
    transform-origin: calc(0.5 * var(--spinnerSize)) calc(0.5 * var(--spinnerSize)) 0;
    animation: spinner 2s linear infinite;
}
@keyframes spinner {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: (0.66 * var(--spinnerSize));
    }
    50% {
        transform: rotate(720deg);
        stroke-dashoffset: (3.14 * var(--spinnerSize));
    }
    100% {
        transform: rotate(1080deg);
        stroke-dashoffset: (0.66 * var(--spinnerSize));
    }
}
</style>

Thanks again for STWUI !

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[N00nDay]

Can you explain the purpose of this? It sounds like you are just trying to create a loader component. Am I correct in that assumption?

[jerefrer]

Indeed I was looking for an easy way to add a loader and instead of looking elsewhere I thought there might be a component in STWUI. Seen there wasn't I looked at the component in the docs and when I saw indeterminate as an available props I thought "bingo let's do this." But it didn't exactly go as planned and I had to check the sources to realize why.

It seems rather logical that if the prop is available for progress bars it should also be available for progress circles. I don't see how use cases could be different, just the shape is.

If that's too much work to fit in, then at the very least the doc should mention that the prop won't work with radial.

[N00nDay]

Indeed I was looking for an easy way to add a loader and instead of looking elsewhere I thought there might be a component in STWUI. Seen there wasn't I looked at the component in the docs and when I saw indeterminate as an available props I thought "bingo let's do this." But it didn't exactly go as planned and I had to check the sources to realize why.

It seems rather logical that if the prop is available for progress bars it should also be available for progress circles. I don't see how use cases could be different, just the shape is.

If that's too much work to fit in, then at the very least the doc should mention that the prop won't work with radial.

Hi @jerefrer, unfortunately, the component make up of a linear and radial progress bar are incredibly different. The radial progress bar is a much more complex component than the linear alternative and I am unable to match the animation style of the linear to that of the radial without a complete overhaul of the component itself. I have added to the documentation to show indeterminate only works for linear and not radial.

[jerefrer]

@N00nDay Good enough for me, at least people would know immediately and won't be surprised if they try it with radial. Thanks for having taken the time to try to find a solution !