Spinner

индикатор, который можно использовать для отображения состояния загрузки.

❯buridan add spinner

Error: Reference Target 'спиннер' not found

Примеры

Размер

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

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

Кнопка

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

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

Значок

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

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

Маркер

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

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

спиннер

spinner(class_name="size-5")

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

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

External Tools

︲

On This Page