Spin

A loading indicator, on its own or wrapped around the content it is waiting for, with a delay so a fast response never flashes it.

Set size to small or large to scale the spinner, and leave it off for the default, medium.

Wrap content in Spin and set spinning to dim it and show the spinner on top, without moving the layout.

Pass description to show a line of text under the spinner.

Set delay in milliseconds to wait before showing the spinner, so a request that finishes sooner never flashes it.

Set percent to a number to draw a progress ring around the spinner, or to "auto" to fill it on its own when you have no number.

Set fullscreen to cover the whole page with a mask and spinner, then turn spinning off from code, since the mask cannot be clicked away.

Pass indicator any node to replace the dots, like a loading icon from your icon pack with animate-spin.

Pass a text color to className to recolor the dots, or to classNames.section when the Spin wraps content.

The component inside real screens, with the components it usually sits beside.

A card whose Reload button sets spinning on its body while it fetches, so the rota dims in place.

Spin's props. Rows marked antuikit in the Version column are added by the kit.

On This Page