Spinner

Spinner — индикатор загрузки для состояний ожидания и асинхронных действий.

Обзор

Spinner стилизуется через одну локальную переменную цвета и сопоставление толщины для каждого размера.

Публичные CSS-переменные

Переменная	Значение	Влияет на
итоговый цвет спиннеракорень		В этом состоянии изменений не видно
диаметр отрендеренного спиннеракорень		В этом состоянии изменений не видно
толщина обводкикорень		В этом состоянии изменений не видно
цвет спиннера primaryвариант primary		В этом состоянии изменений не видно
цвет спиннера secondaryвариант secondary		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень рисует анимированное кольцо с помощью радиального/конического градиента и маски.

Взаимодействие состояний и вариантов

data-size сопоставляется с токенами размера и толщины обводки
data-variant='primary' использует --color-primary-500
data-variant='secondary' использует --color-secondary-500

Примеры

Индикатор загрузки secondary

LTRRTL

secondary-loading-indicator.tsx · 13 строк

import { Spinner, Text } from '@vega-ui/react';
import { useId } from 'react';

export default function SecondaryLoadingIndicator() {
  const labelId = useId();

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-4)' }}>
      <Spinner size={5} variant='secondary' aria-labelledby={labelId} />
      <Text id={labelId} size={5}>Generating preview</Text>
    </div>
  );

Не переопределяйте

не нарушайте контраст между спиннером и фоном
не используйте слишком крупные спиннеры в плотных контролах