Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Feedback

/

Spinner

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

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

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

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

The component that spins.

PropTypeDescriptionValues
empty_colorstr

The color of the empty area in the spinner

labelstr

For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.

speedstr

The speed of the spinner must be as a string and in seconds '1s'. Default is '0.45s'.

thicknessint

The thickness of the spinner.

sizeLiteral

"xs" | "sm" | "md" | "lg" | "xl"

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting