Progress
A bar or circle that reports how far a task has got, or that it is still under way.
Paste this into your agent.
Progress tracks uploads, exports and other tasks, with a known amount done or an indeterminate state. It comes as a linear bar and a separate ProgressCircle. Your app handles timing, cancellation and failure.
Install
bashnpx shadcn@4.18.0 add @siteplane/progress
Import it from @/siteplane/components/progress. The project needs Siteplane UI's one-time setup first: .
When to pick it
- vs : Pick Meter instead for a level within a range, such as storage used.
- vs : Pick Spinner instead for a short wait with no measurable progress.
- vs : Pick Skeleton instead when content loads into a known layout.
Rules
- Name it with ProgressLabel or aria-label, and keep that name stable while the value changes.
- Pass value null for an indeterminate state when you cannot measure completion.
- Include ProgressTrack and ProgressIndicator yourself when you supply custom children.
- ProgressCircle stands alone: pass it a value and leave it without children.
- Show your own message when the task fails; the bar does not report errors.
Reference
Add to your agent
Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides
CLI
MCP server
Questions
Related skills
Better Colorsby jakubkrehel
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
VisualExternalGitHub stars: 9.2K
Better Interfaceby jakubkrehel
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
VisualExternalGitHub stars: 9.2K
Better Typographyby jakubkrehel
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
TypographyExternalGitHub stars: 9.2K
Color Contrast for Taste, Not Just Complianceby UI Skillbook
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
Visual