Charcoal UI

React Loading, Progress and Toast Components

Animated React loaders, progress bars, skeletons, alerts, confetti and status badges.

About these loading, progress and toast components

Feedback tells people their action landed: a loader while work runs, a progress bar that springs instead of jumping, a skeleton that crossfades into real content, a check that draws itself on success, and confetti when something deserves it.

Every one of them announces its state through the right role or a live region, so screen-reader users hear what sighted users see.

Where they earn their keep

  • Loading states for pages, panels and buttons.
  • Uploads, exports and background jobs.
  • Success and error moments after a form.
  • Status pages and deploy indicators.

How they are built

Most loaders are pure CSS animations, so they cost almost nothing to run. Values move on springs, and live regions are polite, so updates never interrupt what someone is reading.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 23 loading, progress and toast components

6 are free and MIT licensed, and 17 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Progress: Animated React progress bars and rings on springs, with an indeterminate sweep
  • Loader: Four quiet React loaders, dots, bars, orbit and pulse, that announce themselves
  • Status Badge: A React status badge that morphs between states with a pulsing live dot
  • Skeleton: React skeleton loaders with a soft sweep and a blur crossfade to real content
  • Alert: Animated React alerts for info, success, warning and error that collapse smoothly
  • Countdown (Pro): An animated React countdown timer whose digits roll as they tick
  • Confetti (Pro): React confetti that bursts from any point on a throwaway canvas
  • Ripple (Pro): A React press ripple that spreads from the exact point you pressed
  • Success Check (Pro): A React spinner that resolves into a drawn check or a shaking cross
  • Story Progress (Pro): React story progress bars like Instagram: segmented, auto-advancing, pausable
  • Progress Ring (Pro): An animated React progress ring with a travelling glow and a counting centre value
  • Pull to Refresh (Pro): React pull to refresh with resistance, a filling loader and a spin until done
  • Empty State (Pro): A React empty state with an animated illustration, title, description and action
  • Live Dot (Pro): A React presence dot with a pulsing halo for live, busy, away and offline
  • Inline Confirm (Pro): A React inline confirm that turns a button into a Sure? pair in place
  • Upload Tray (Pro): An animated React upload tray with progress, pause, retry and drawn checks
  • Scroll Cue (Pro): A React scroll hint: a mouse, chevron or line that fades once you scroll
  • Sparkle Badge (Pro): A React AI badge with twinkling sparkles and a shimmer sweep
  • Audio Visualizer (Pro): A React audio visualizer: bars, wave or ring driven by Web Audio or a synthetic beat
  • Activity Pulse (Pro): A React live activity feed with pulse rings, ticking timestamps and capped rows
  • Lattice Loader: A React agent status row with a lattice loader, the current task and a stopwatch
  • Swipe Toast (Pro): A React toast you swipe away, with a fuse that shows the time it has left
  • Motion Grid (Pro): A React LED matrix loader with wave, spiral, pulse, snake and rain patterns

Install one

npx shadcn@latest add https://charcoalui.com/r/progress.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do the loaders announce themselves?
Yes. Loaders and progress use status and progressbar roles with labels, so screen readers report that something is loading and how far along it is.
Will they slow my page down?
No. Spinners and pulses are CSS keyframes, and heavier effects like confetti only run while they are on screen.
Do they respect reduced motion?
Yes. Every feedback component checks prefers-reduced-motion and falls back to a calm, static state.
Do these loading, progress and toast components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.