Spinner

Spinner — это компонент, предназначенный для отображения состояния загрузки в интерфейсе. Он помогает пользователям понять, что приложение выполняет асинхронную операцию, и что нужно немного подождать. В Chakra UI спиннер полностью настраиваемый, легкий и совместим с системой темизации.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { Spinner } from "@chakra-ui/react";

Базовый спиннер отображается следующим образом:

<Spinner />

По умолчанию спиннер наследует цвет gray.500 и размер md.

Настройка размера

Chakra UI предоставляет несколько стандартных размеров спиннера:

  • xs
  • sm
  • md (по умолчанию)
  • lg
  • xl

Пример:

<Spinner size="lg" />

Размер можно задавать и числовым значением в пикселях:

<Spinner size="40px" />

Настройка цвета и толщины

Цвет спиннера можно менять с помощью свойства color:

<Spinner color="blue.500" />

Толщина ободка спиннера регулируется через свойство thickness:

<Spinner thickness="4px" />

Это позволяет визуально контролировать жирность линии вращающегося круга.

Скорость анимации

Скорость вращения задается через speed, которая принимает строку с CSS-временем:

<Spinner speed="0.65s" />

Значение по умолчанию — "0.45s". Более короткое время увеличивает скорость вращения, более длинное — замедляет анимацию.

Цвет фона спиннера

Свойство emptyColor отвечает за цвет “фонового” сегмента спиннера:

<Spinner color="green.500" emptyColor="gray.200" />

Это создаёт эффект, когда часть круга яркая, а остальная полупрозрачная, формируя видимую анимацию движения.

Интеграция с условной отрисовкой

Spinner часто используется для отображения состояния загрузки данных. В сочетании с условной логикой это выглядит так:

function UserProfile({ isLoading, user }) {
  return (
    <div>
      {isLoading ? (
        <Spinner size="xl" color="teal.500" />
      ) : (
        <div>{user.name}</div>
      )}
    </div>
  );
}

Встраивание в контейнер

Компонент можно центрировать с помощью Flex или Box:

import { Box, Spinner } from "@chakra-ui/react";

<Box display="flex" alignItems="center" justifyContent="center" height="200px">
  <Spinner size="xl" color="purple.500" />
</Box>

Это удобно для страниц загрузки или модальных окон.

Использование с Button

Spinner можно использовать внутри кнопок для индикации процесса:

import { Button, Spinner } from "@chakra-ui/react";

<Button isLoading loadingText="Загрузка">
  Отправить
</Button>

isLoading автоматически заменяет содержимое кнопки на спиннер с текстом loadingText.

Кастомизация через стили

Chakra UI позволяет изменять спиннер через системные свойства (sx, style или chakra props):

<Spinner
  size="lg"
  color="pink.500"
  thickness="6px"
  speed="1s"
  emptyColor="pink.100"
/>

Можно также применять анимации и трансформации через @keyframes в Chakra theme.

Спиннер в темной и светлой теме

Chakra UI автоматически поддерживает систему тем:

<Spinner color="teal.400" emptyColor="teal.100" />

В темной теме рекомендуется использовать более светлые цвета для лучшей видимости, а в светлой — насыщенные.

Комбинирование с другими компонентами

Spinner можно использовать вместе с Alert, Modal или Skeleton для создания комплексных состояний загрузки:

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    {isLoading ? (
      <Spinner size="xl" color="blue.500" />
    ) : (
      <ModalBody>{content}</ModalBody>
    )}
  </ModalContent>
</Modal>

Резюме основных свойств Spinner

Свойство Описание Пример
size Размер спиннера (xs, sm, md, lg, xl) <Spinner size="lg" />
color Основной цвет сегмента <Spinner color="red.500" />
emptyColor Цвет “пустого” сегмента <Spinner emptyColor="gray.200" />
thickness Толщина ободка <Spinner thickness="4px" />
speed Время полного оборота анимации <Spinner speed="0.65s" />
label Текстовый label для доступности (screen readers) <Spinner label="Загрузка..." />
isIndeterminate Контролирует бесконечную анимацию (по умолчанию true) <Spinner isIndeterminate />

Spinner в Chakra UI обеспечивает гибкую настройку, простую интеграцию с другими компонентами и совместимость с темами, что делает его универсальным инструментом для отображения состояния загрузки в любых приложениях на JavaScript.

Оглавление