Loader
Four quiet loaders: dots, bars, orbit and ember pulse. Each announces itself to screen readers.
- Category: Feedback
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Loader
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dots" | "bars" | "orbit" | "pulse" | "dots" | |
size | number | 24 | |
label | string | "Loading" |
About Loader
Loader offers four calm loading indicators, dots, bars, an orbit and an accent pulse, each sized by a prop and each announced to screen readers so nobody waits in silence.
Loader is a feedback component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Loader
- Buttons and inline async states.
- Page and panel loading.
- Chat and AI responses.
- Table and list refreshes.
How it works
Every loader is a status role with a hidden label. Animations are CSS keyframes, so they cost nothing to run and stop cleanly with reduced motion.
State changes are announced through live regions or the right ARIA roles, so screen-reader users hear what sighted users see. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Loader
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change size live, and the Code tab updates to match, so the snippet you copy already carries your values.
- variant (default "dots").
- size (number, default 24).
- label (string, default "Loading").
Goes well with Loader
Loader is already composed into a ready-made section, so you can see it in context or install the whole block.
- Features Bento: Features section
- Progress: Animated React progress bars and rings on springs, with an indeterminate sweep
- 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
- Typing Indicator: A React typing indicator: a bubble with rippling dots that tells screen readers who is typing
Install Loader
npx shadcn@latest add https://charcoalui.com/r/loader.jsonLoader is free and MIT licensed. The command copies loader.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Thinking Orb, a Pro piece: A sphere of dots that shows an AI is busy, with nine motions for nine kinds of busy: working, searching, solving, listening, connecting, composing, breathing, weaving and shaping. States morph into each other; dots can lean towards the cursor.
Frequently asked questions
- How do I install Loader?
- Run npx shadcn@latest add https://charcoalui.com/r/loader.json. The shadcn CLI copies loader.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Loader free for commercial use?
- Yes. Loader is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Loader work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Loader?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Loader's props and source and get_install_command returns the exact command.