@snack-uikit/loaders

Loaders

Installation

npm i @snack-uikit/loaders

Changelog

Description

• Назначение: набор компактных индикаторов загрузки, которые можно использовать в любых сценариях ожидания — внутри кнопок, карточек, таблиц, полноэкранных заглушек и т.д.
• Состав пакета: включает два отдельных компонента — Spinner и Sun, которые отличаются визуальным стилем анимации, но имеют одинаковый интерфейс пропов.
• Управление размером: оба компонента принимают проп size (значения из LoaderSize: "xxs", "xs", "s", "m", "l"), что позволяет подстраивать индикатор под контекст (иконки, строки таблиц, крупные блоки).
• Кастомизация: через проп className можно переопределять стили (например, цвет через CSS-переменные) и адаптировать внешний вид лоадера под бренд.
• Технические детали: лоадеры реализованы как SVG с анимацией, поддерживают передачу дополнительных служебных атрибутов (data-атрибуты и т.п.) за счёт WithSupportProps.

Spinner

Description

• Компонент: Spinner — классический круговой индикатор загрузки с дугой, вращающейся по окружности.
• Сценарии использования: хорошо подходит для фоновых операций, загрузки контента в блоках, форм, небольших областях интерфейса, когда нужно явно показать процесс ожидания.
• Размеры: через проп size поддерживает пять размеров ("xxs", "xs", "s", "m", "l"), что позволяет использовать его как очень компактный индикатор (например, в иконках) или более крупный — для основных областей.
• Кастомизация: проп className позволяет изменять внешний вид через CSS (цвет, позиционирование, отступы и т.д.), при этом базовая анимация и геометрия остаются консистентными.
• Интеграция в тесты и аналитики: компонент прокидывает дополнительные атрибуты (например, data-test-id) и помечает текущий размер через data-size, что удобно для e2e-тестов и диагностики.
• Figma: Spinner

Example

import { Spinner } from '@snack-uikit/loaders';

export const SpinnerExample = () => (
  <>
    {/* Компактный спиннер, например, для иконки или небольшой кнопки */}
    <Spinner size='xs' />

    {/* Базовый спиннер среднего размера */}
    <Spinner size='s' />

    {/* Крупный спиннер для выделенных зон загрузки */}
    <Spinner size='l' />
  </>
);

Sun

Description

• Компонент: Sun — альтернативный индикатор загрузки в виде стилизованного солнца с лучами, создающий более выразительный и «живой» визуальный акцент.
• Сценарии использования: хорошо работает в промо-блоках, онбординге, пустых состояниях или там, где нужен более дружелюбный и заметный лоадер по сравнению с классическим спиннером.
• Размеры: так же, как и Spinner, принимает проп size ("xxs", "xs", "s", "m", "l"), что позволяет визуально согласовать лоадер с остальными элементами интерфейса.
• Кастомизация: с помощью className можно настраивать цветовую схему и анимацию через CSS, адаптируя Sun под тему продукта или конкретный сценарий.
• Интеграция в тесты и аналитики: компонент поддерживает дополнительные атрибуты (например, data-test-id) и выставляет data-size, что облегчает автоматизированное тестирование и отладку.
• Figma: Sun

Example

import { Sun } from '@snack-uikit/loaders';

export const SunExample = () => (
  <>
    {/* Небольшой индикатор загрузки, встроенный в строку текста или компактный блок */}
    <Sun size='s' />

    {/* Крупный солнечный лоадер для промо- или онбординг-экранов */}
    <Sun size='l' />
  </>
);

Spinner

Компонент спиннер

Props

name	type	default value	description
size	enum LoaderSize: "xxs", "xs", "s", "m", "l"	s	Размер
className	string	-	CSS-класс

Sun

Компонент спиннер

Props

name	type	default value	description
size	enum LoaderSize: "xxs", "xs", "s", "m", "l"	s	Размер
className	string	-	CSS-класс