Spinner

Spinner indicates a progress of an action that can't be measured or estimated.

#Example

#Usage

#Variants

The default variant renders a circular progress indicator.

Use the squares variant for a sliding squares animation.

#Sizes and Speeds

#Squares Variant Examples

#Color

If you want the spinner to match surrounding text, you can set the color to currentColor.

#Guidelines

#When to use

• When action is expected to finish quickly, in about 5 seconds max.
• When you need to display an indication of a progress immediately after user performs an action.

#Variant selection

• Default variant: Use for most loading states. Provides a familiar circular progress indicator.
• Squares variant: Use when you want a more distinctive loading animation that stands out from the default spinner.

#When not to use

• If action was performed in the past, prior to user loading the current page, use a progress bar.
• If action is expected to run for a long time, use a progress bar.

#Props

Inherits margin props.

Name	Default	Description
size	"md"	"xs" | "sm" | "md" | "lg" Spinner size.
speed	"normal"	"slow" | "normal" | "fast" Spinner speed.
variant	"default"	"default" | "squares" Spinner variant determines the animation style.
color	"primary.base"	"currentColor" | "primary.base" You can set the color to `currentColor` if you want the spinner to match surrounding text.
boxSize	—	LayoutProps["boxSize"] Override the spinner's box size. Use sparingly — prefer `size` presets.