Spinner

Компонент Spinner отображает индикатор загрузки. Поддерживает три варианта оформления, различные цвета, анимацию вращения и эластичный режим.

Обзор

  • Основное назначение: индикация выполнения асинхронных операций.
  • Ключевые возможности:
    • Три варианта: default (кольцо с прозрачным сегментом), soft (мягкое кольцо), innerDot (SVG с точкой внутри).
    • Цветовая палитра, включая white.
    • Анимация вращения (animate).
    • Эластичный режим (isElastic).
    • Нестилизованный режим (unstyled).
    • Состояние блокировки с пониженной непрозрачностью.

API компонента

Props

ПропТипПо умолчаниюОписание
variantString'default'Вариант оформления. Возможные значения: 'default', 'soft', 'innerDot'.
colorString'neutral'Цвет спиннера. Возможные значения: 'neutral', 'primary', 'secondary', 'success', 'error', 'warning', 'info', 'white'.
animateBooleantrueВключает анимацию вращения.
isElasticBooleanfalseДобавляет класс is-elastic для кастомной эластичной анимации.
disabledBooleanfalseСнижает непрозрачность до 50%.
unstyledBooleanfalseЕсли true, убирает все стили по умолчанию.
classNameStringДополнительные CSS-классы.

Варианты оформления

variant: 'default'

Кольцо, у которого правый сегмент прозрачен (border-r-transparent), создавая эффект вращающегося разрыва.

  • neutral: border-gray-500 с прозрачным правым сегментом.
  • white: border-white с прозрачным правым сегментом.
  • цветной: border-this с прозрачным правым сегментом.

variant: 'soft'

Мягкое кольцо с полупрозрачной основой и цветным правым сегментом.

  • neutral: border-gray-150 с border-r-gray-500.
  • white: border-white/30 с border-r-white.
  • цветной: border-this/30 с border-r-this.

variant: 'innerDot'

SVG-спиннер с иконкой, содержащей точку на кольце.

  • Цвет применяется через text-* (currentColor).
  • neutral: text-gray-500.
  • white: text-white.
  • цветной: text-this.