---
title: "Spinner"
description: "An indicator that can be used to show a loading state."
order: 0
---


## Spinner, An Indicator That Can Be Used To Show A Loading State.


```python
from components.ui.spinner import spinner
```

```python
from typing import Any

from reflex.components.component import Component
from reflex.utils.imports import ImportVar
from reflex.vars import FunctionVar, Var
from reflex.vars.base import VarData

PACKAGE_CN = "clsx-for-tailwind@1.0.0"
CN = Var(
    "cn",
    _var_data=VarData(
        imports={
            PACKAGE_CN: ImportVar(tag="cn"),
        },
    ),
).to(FunctionVar)


class CoreComponent(Component):
    unstyled: Var[bool]

    @classmethod
    def set_class_name(
        cls, default_class_name: str | Var[str], props: dict[str, Any]
    ) -> None:

        if "render_" in props:
            return

        props_class_name = props.get("class_name", "")

        if props.pop("unstyled", False):
            props["class_name"] = props_class_name
            return

        props["class_name"] = cn(default_class_name, props_class_name)

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "unstyled",
        ]


def cn(*classes: Var | str | tuple | list | None) -> Var:
    return CN.call(*classes).to(str)
```

```python
import reflex as rx
from reflex_components_core.el import svg

from ..core.core import cn


def spinner(class_name: str = "", **props) -> rx.Component:
    return svg(
        svg.path(
            d="M21.9961 12C21.9961 17.5228 17.5189 22 11.9961 22C6.47325 22 1.99609 17.5228 1.99609 12C1.99609 6.47715 6.47325 2 11.9961 2",
        ),
        xmlns="http://www.w3.org/2000/svg",
        view_box="0 0 24 24",
        fill="none",
        stroke="currentColor",
        stroke_width="1.5",
        stroke_linecap="round",
        class_name=cn("size-4 animate-spin", class_name),
        data_slot="spinner",
        role="status",
        **props,
    )
```

# Examples

## Size

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

**Props used:** `class_name` on `spinner`.

```python
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`.

```python
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`.

```python
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`.

```python
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

```python
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.