Spinner

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

python

import reflex as rx

python

rx.spinner()

Basic Examples

Spinner can have different sizes.

python

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

Demo with buttons

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

python

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

Spinner inside a button

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.

python

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