Spinner
A looping animation that shows work is under way when its duration is unknown.
Paste this into your agent.
Spinner covers short waits with no measurable progress: on its own, in an input addon during a search, or in a button. It has several visual variants and respects reduced motion.
Install
bashnpx shadcn@4.18.0 add @siteplane/spinner
Import it from @/siteplane/components/spinner. The project needs Siteplane UI's one-time setup first: .
When to pick it
- vs : Pick Progress instead when completion can be measured.
- vs : Pick Skeleton instead when content loads into a known layout.
Rules
- Set aria-label to say what is loading, or hide the spinner from assistive technology when nearby text already says it.
- For a pending button, use the Button loading prop instead of placing a Spinner inside by hand.
- Scale it with size utility classes; it is 16 px by default.
- Remove it when the request settles and show the error state yourself; the spinner tracks nothing.
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