Orbit loader
Three dots chasing each other around an orbit while something loads.
Loaders & skeletons
Waiting is part of the experience. These loaders and skeletons stay calm, match your colours, and stop animating when users ask for less motion.
17 live assets · React + Tailwind + Motion · restyle to your design tokens
Animations
Skeleton shimmer
Placeholder blocks with a light sweep while content loads.
Dot wave loader
Typing indicator or compact loader with a screen-reader label: three accent dots that rise and settle one after another in a rolling wave.
Indeterminate bar
Thin progress bar for work of unknown length that you can pin to the page top or drop into a card, with a long and a short accent segment chasing across a tinted track.
Gradient ring spinner
Spinning ring whose accent tail fades to transparent behind a rounded head, with a soft glow over a faint track.
Bar spinner
Classic activity indicator: a ring of rounded bars where a bright head steps around and each bar fades behind it, in the current text colour with role=status.
Skeleton table
Table-shaped loading placeholder with a header, avatar-and-two-line first column and text cells, whose shimmer travels across each row and cascades down; rows and columns are props.
Progress circle
Determinate circular progress whose stroke springs to each value while the centred percentage counts along, morphing into a drawn tick with a soft pulse at completion.
Shape morph loader
A loader that springs from square to circle to triangle and back, turning as it morphs and settling upright between shapes, with role=status and a screen-reader label.
Typing indicator
A chat typing bubble with a two-circle tail that springs out of the sender's corner, breathes while its three dots brighten in turn, and collapses away when typing stops, with stacked initials and a live 'is typing' announcement.
Shimmer text loader
A status line whose text carries a band of light sweeping through it, stepping through optional labels with a soft rise-and-blur swap, behind a small pulsing dot and a polite live region.
Card skeleton swap
A card-shaped skeleton (media, avatar and text lines) under one diagonal shimmer that sweeps the whole card, which cross-fades into the real content and springs to its height when loaded turns true.
Live task steps
Vertical progress for a long job: the running step spins with a live elapsed timer and an optional detail line, finished steps pop into drawn checks and keep their times, and the rail between them fills step by step.
Progress bar with ETA
Determinate progress bar that springs to each value with a counting percentage and a travelling glint, estimates time left from the value's real, smoothed pace, flags “Stalled” when nothing moves, and lands on a drawn check.
Blur-up image
Aspect-locked image frame behind a softly breathing blurred placeholder (tiny inline image, gradient or dominant colour) that shows a ring only if loading drags on, then sharpens the real image in from blur and a slight zoom.
Upload queue
Corner tray for background uploads with an overall ring and a summary that swaps as work finishes, and a row per file whose ring springs to its progress, becomes a cancel button on hover or focus, morphs into a check when done and offers Retry on failure.
Refetch veil
Stale-while-revalidate wrapper that keeps old content in place while it refreshes (dimmed and desaturated under a hairline sweep and an “Updating” chip, only if the refetch outlasts a short delay), then lifts with a soft highlight pass and an “Up to date” check.
With your agent
From this page to your app in three steps
- 1Add the ones you like to your sheet. It holds your colours, type and motion.
- 2Connect Claude, Cursor or any MCP client in a click.
- 3Ask for the screen. Your agent pulls these exact components with your values filled in.
Skeleton or spinner?
Use a skeleton when you know the layout that’s coming (a feed, a table) and a spinner or bar when you don’t. Both are here.
Are they accessible?
They carry a status role and label, so screen readers announce loading without reading out decorative shapes.
More of the library
Guides and articles
Use caseWuizard for indie developers: launch with a finished lookSolo and shipping fast? Give your coding agent a design system it follows, from the first screen to the landing page, the app icon and the changelog.5 min readArticleHow a coding agent reads your design system over MCPWhat happens between your prompt and the code: which Wuizard tools your agent calls, what each one returns, and how it checks its work against your sheet.6 min readGuideConnect your coding agent to Wuizard over MCPConnect Claude, Claude Code, Cursor, Windsurf or any MCP client to Wuizard, so your agent builds with your exact colours, fonts and components.6 min read
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.