# Progress Indicator

> Progress bars, step indicators, loading progress, and progress feedback patterns.

- Skill: `dragoon0x/progress-indicator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/progress-indicator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/progress-indicator/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

---


# Progress Indicators

## Types
| Type | When |
|------|------|
| Determinate bar | Known progress (file upload, multi-step form) |
| Indeterminate bar | Unknown duration but brief |
| Circular/ring | Space-constrained, or for completion percentage |
| Step indicator | Multi-step processes with discrete steps |
| Skeleton | Content loading placeholder |

## Design Rules
1. Show percentage for determinate progress
2. Estimated time remaining for long operations
3. Use animation direction to indicate activity
4. Color: brand color for normal, green for complete
5. Don't show progress for operations under 1 second
6. For >10 seconds: show what's happening ("Uploading file 3 of 7")

## Step Indicators
- Completed steps: filled circle + checkmark
- Current step: filled circle + number
- Future steps: outlined circle + number
- Connected by a line (filled to current point)