Reflex Logo

Intro

Gallery

Hosting

Learn

Components

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
PropTypeDescriptionValues
sizeLiteral

The size of the spinner.

loadingbool

If set, show an rx.spinner instead of the component children.

Event Triggers

See the full list of default event triggers
← ScrollAreaTable →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting