---
title: "Спиннер"
description: "Индикатор, который можно использовать для отображения состояния загрузки."
order: 0
---
## Spinner — индикатор, который можно использовать для отображения состояния загрузки.


```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,
    )
```

# Примеры

## Размер

Используйте служебный класс `size-*`, чтобы изменить размер счетчика.

**Использованный реквизит:** `class_name` на `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",
    )
```

## Кнопка

Добавьте счетчик к кнопке для состояния загрузки. Добавьте `data-icon="inline-start"`, чтобы разместить его перед меткой.

**Использованный реквизит:** `data_icon` на `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",
    )
```

## Значок

Добавьте к значку счетчик состояния загрузки/синхронизации.

**Использованный реквизит:** `data_icon` на `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",
    )
```

## Маркер

Объедините `spinner` с `marker` и утилитой `shimmer` для получения анимированных индикаторов состояния потоковой передачи. Установите `role="status"`, чтобы вспомогательные технологии объявляли об обновлениях.

**Использованный реквизит:** `role` на `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

## спиннер

```python
spinner(class_name="size-5")
```

| Опора | Тип | По умолчанию | Описание |
| ------------ | ------ | ------- | ---------------------------------------------------------------------- |
| `class_name` | `str` | `""` | К значку применены дополнительные классы (например, `size-*` для изменения размера).      |

Любой другой реквизит, принятый нативным `<svg>` (`role`, `aria_label`, `data_icon` и т. д.), также передается напрямую. `role="status"` установлен по умолчанию.