Spinner

An indicator that can be used to show a loading state.

❯buridan add spinner

Component Guide

Use the following to build the Spinner component.

from components.ui.spinner import spinner

spinner()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/spinner.py

Examples

Size

Use a size-* utility class to change the spinner's size.

Props used: class_name on spinner.

import reflex as rx

from components.ui.spinner import spinner


def spinner_size():
    return rx.el.div(
        spinner(class_name="size-3"),
        spinner(class_name="size-4"),
        spinner(class_name="size-6"),
        spinner(class_name="size-8"),
        class_name="flex items-center gap-6",
    )

Button

Add a spinner to a button for a loading state. Add data-icon="inline-start" to position it before the label.

Props used: data_icon on spinner.

import reflex as rx

from components.ui.button import button
from components.ui.spinner import spinner


def spinner_button():
    return rx.el.div(
        button(spinner(), "Loading...", disabled=True, size="sm"),
        button(spinner(), "Please wait", disabled=True, size="sm", variant="outline"),
        button(spinner(), "Processing", disabled=True, size="sm", variant="secondary"),
        class_name="flex flex-col items-center gap-4",
    )

Badge

Add a spinner to a badge for a loading/syncing state.

Props used: data_icon on spinner.

SyncingUpdatingProcessing

import reflex as rx

from components.ui.badge import badge
from components.ui.spinner import spinner


def spinner_badge():
    return rx.el.div(
        badge(spinner(), "Syncing"),
        badge(spinner(), "Updating", variant="secondary"),
        badge(spinner(), "Processing", variant="outline"),
        class_name="flex items-center gap-4",
    )

Marker

Combine spinner with marker and the shimmer utility for animated streaming status indicators. Set role="status" so assistive technology announces updates.

Props used: role on spinner.

Thinking…

Generating response…

Processing

import reflex as rx

from components.ui.marker import marker
from components.ui.spinner import spinner


def spinner_marker():
    return rx.el.div(
        marker.root(
            marker.icon(spinner()),
            marker.content("Thinking…", class_name="shimmer w-fit"),
            role="status",
        ),
        marker.root(
            marker.icon(spinner()),
            marker.content("Generating response…", class_name="shimmer w-fit"),
            variant="border",
            role="status",
        ),
        marker.root(
            marker.icon(spinner()),
            marker.content("Processing"),
            variant="separator",
            role="status",
        ),
        class_name="flex w-full max-w-sm flex-col gap-6",
    )

API Reference

spinner

spinner(class_name="size-5")

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes applied to the icon (e.g. `size-*` to resize).

Any other prop accepted by a native <svg> (role, aria_label, data_icon, etc.) is also passed straight through. role="status" is set by default.