Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Feedback

/

Spinner

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

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...

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",
    ),
)

API Reference

Spinner

The component that spins.

Prop	Type	Default Value	Values
`empty_color`	str
`label`	str
`speed`	str
`thickness`	int
`size`	Literal

Event Triggers

See the full list of default event triggers

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Spinner

API Reference

Spinner