# loading-states

Скилл для индикаторов загрузки: спиннеры, прогресс-бары, скелетоны и шиммер. Пригодится, когда интерфейс должен показать, что система работает.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 562 установки · ★ 124
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/05-by-animation-type/loading-states/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/dylantarre-loading-states

## Что делает

Скилл разбирает анимации ожидания через 12 принципов Disney и превращает их в конкретные правила. Squash & Stretch задаёт лёгкую пульсацию индикатора (масштаб 0.98–1.02), Anticipation требует показать состояние загрузки сразу по действию, а Staging — ставить индикатор туда, где появится контент. Скелетоны при этом должны совпадать по пропорциям с настоящим содержимым, иначе иллюзия ломается.

Тайминги прописаны отдельно для каждого типа. Спиннер появляется с задержкой 200ms, чтобы не мигать на быстрых загрузках, и держится минимум 500ms; цикл шиммера скелетона — 1500ms. Прогресс-бар показывается без задержки и плавно заполняется между известными процентами. Переход от загрузки к контенту перекрывается на 100ms, чтобы не было резкого скачка.

Внутри есть готовые CSS-паттерны: шиммер через `linear-gradient` и `@keyframes`, спиннер с плавным вращением, прогресс-бар с `cubic-bezier(0.4, 0, 0.2, 1)` и появление контента через `content-reveal`. Отдельным пунктом идёт `prefers-reduced-motion` — при включённой настройке вместо анимации показывается статичный индикатор. Если у вас в проекте уже есть свои тайминги загрузки, этот скилл стоит сверить с ними: расхождения по задержке и минимальному времени показа дадут заметное мигание.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill loading-states -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/loading-states/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/loading-states/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill loading-states -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/loading-states/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill loading-states -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/loading-states/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles loading-states
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/loading-states/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill loading-states -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/05-by-animation-type/loading-states
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/loading-states/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill loading-states -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/05-by-animation-type/loading-states/SKILL.md

## Когда брать
- показать спиннер, не дожидаясь медленного ответа сервера
- собрать скелетон, совпадающий по пропорциям с реальным контентом
- убрать мигание индикатора на быстрых загрузках
- сделать плавный переход от загрузки к контенту
- учесть `prefers-reduced-motion` в анимациях ожидания

## Примеры запросов агенту
- Сделай скелетон для карточки товара по скиллу loading-states
- Настрой тайминги спиннера и прогресс-бара, как в loading-states
- Проверь мои анимации загрузки на соответствие loading-states

## Похожие
- [loading-states-and-perceived-performance](https://affpapa.org/nevibecode/skills/loading-states-and-perceived-performance.md) — скилл · 871 установка
- [button-states](https://affpapa.org/nevibecode/skills/button-states.md) — скилл · 877 установок
- [beam-glow-states](https://affpapa.org/nevibecode/skills/beam-glow-states.md) — скилл · 1300 установок
- [emil-design-eng](https://affpapa.org/nevibecode/skills/emil-design-eng.md) — скилл · 388200 установок
- [review-animations](https://affpapa.org/nevibecode/skills/review-animations.md) — скилл · 256500 установок
- [better-ui](https://affpapa.org/nevibecode/skills/better-ui.md) — скилл · 39300 установок

## Другие версии с тем же именем
- [loading-states · owl-listener](https://affpapa.org/nevibecode/skills/loading-states.md) — 2200 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 86 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md