︲

︲

Spinner

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

Note: The Spinner component is a fully custom implementation using in-line svg with no external dependencies.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component spinner

Anatomy

Use the following composition to build a Spinner component.

spinner()

Examples

Size

Use the size-* utility class to change the size of the 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 to indicate a loading state. Place it before the label for a start position.

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 to indicate a loading or syncing state.

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

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

PropTypeDefaultDescription
class_namestr""Additional Tailwind classes applied to the icon.
**propsdict—Any valid HTML attribute forwarded to the element (role, aria_label, etc.).