# Progress Indicator Patterns

> Progress bars, spinners, step indicators, and loading feedback design.

- Skill: `dragoon0x/progress-indicator-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/progress-indicator-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/progress-indicator-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/progress-indicator-patterns

---


# Progress Indicator Patterns

## Choosing a Pattern

| Know the percentage? | Duration | Pattern |
|---------------------|----------|--------|
| Yes | Any | Determinate progress bar |
| No | < 3 sec | Spinner |
| No | 3-10 sec | Spinner + message |
| No | > 10 sec | Skeleton or progress with steps |

## Progress Bar Rules
- Never go backwards. If progress recalculates, pause at current position.
- Show percentage OR "X of Y" alongside the bar.
- Stripe/pulse animation for indeterminate progress.
- Color change at completion (brand color → green).

## Spinner Rules
- Only show if operation takes > 300ms.
- Don't use spinners for content loading (use skeletons).
- Center in the container they're loading.
- Include text for operations > 3 seconds: "Loading your dashboard..."

## Anti-Patterns
- Spinners that spin forever with no timeout or error state.
- Progress bars that jump from 10% to 90% then sit at 99%.
- Multiple spinners visible at once.