# @snack-uikit/loaders

> Индикация загрузки: полоса загрузки, спиннер и загрузчик- "солнышко"

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/loaders
pnpm add @snack-uikit/loaders
yarn add @snack-uikit/loaders
bun add @snack-uikit/loaders
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Dmitry Kruglov |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/loaders
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/loaders
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/loaders

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.9.12-preview-fc6b5b87.0 — 2026-08-20
- 0.9.11 — 2026-05-18
- 0.9.10 — 2026-01-19
- 0.9.9 — 2025-09-01
- 0.9.9-preview-2ce82c96.0 — 2025-09-01
- 0.9.9-preview-dbf3f886.0 — 2025-08-27
- 0.9.9-preview-af47d898.0 — 2025-08-27
- 0.9.9-preview-05f26bf6.0 — 2025-08-27
- 0.9.9-preview-23549ae9.0 — 2025-08-25
- 0.9.8 — 2025-07-16
- … 64 more at https://npm.io/package/@snack-uikit/loaders/versions

## README

# Loaders

## Installation
`npm i @snack-uikit/loaders`

[Changelog](./CHANGELOG.md)

## 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](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A2&mode=design)

### Example

```tsx
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](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A2&mode=design)

### Example

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

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

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

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## 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-класс |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/loaders · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._