Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Datadisplay

/

Spinner

Spinner is used to display an animated loading indicator when a task is in progress.

rx.spinner()

Spinner can have different sizes.

rx.vstack(
    rx.hstack(
        rx.spinner(size="1"),
        rx.spinner(size="2"),
        rx.spinner(size="3"),
        align="center",
        gap="1em",
    )
)

Buttons have their own loading prop that automatically composes a spinner.

rx.button("Bookmark", loading=True)

If you have an icon inside the button, you can use the button's disabled state and wrap the icon in a standalone rx.spinner to achieve a more sophisticated design.

rx.button(
    rx.spinner(loading=True), "Bookmark", disabled=True
)

A spinner component.

Test
PropTypeDefault ValueValues
size
Union[Literal, Breakpoints]
loading
bool

Event Triggers

See the full list of default event triggers
← ScrollAreaTable →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting