Reflex | Spinner

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

Spinner

Spinners provide a visual cue that an event is either processing, awaiting a course of change or a result.

rx.hstack(
    rx.spinner(color="red", size="xs"),
    rx.spinner(color="orange", size="sm"),
    rx.spinner(color="green", size="md"),
    rx.spinner(color="blue", size="lg"),
    rx.spinner(color="purple", size="xl"),
)

Along with the color you can style further with props such as speed, empty color, and thickness.

rx.hstack(
    rx.spinner(
        color="lightgreen",
        thickness=1,
        speed="1s",
        size="xl",
    ),
    rx.spinner(
        color="lightgreen",
        thickness=5,
        speed="1.5s",
        size="xl",
    ),
    rx.spinner(
        color="lightgreen",
        thickness=10,
        speed="2s",
        empty_color="red",
        size="xl",
    ),
)

Spinner

The component that spins.

Props

Prop	Type	Description
`empty_color`	str	The color of the empty area in the spinner
`label`	str	For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
`speed`	str	The speed of the spinner must be as a string and in seconds '1s'. Default is '0.45s'.
`thickness`	int	The thickness of the spinner.
`size`	str	"xs" \| "sm" \| "md" \| "lg" \| "xl"

Base Event Triggers

← Skeleton Avatar →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Spinner

Spinner

Props

Base Event Triggers

[ Learn ]