Charging WidgetCircular battery indicator with animated liquid waves that rise as the percentage counts up, looping continuously.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/charging-widgetFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses Manrope. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Charging Widget
Charging Widget is a circular battery indicator with liquid waves that rise inside the ring as the percentage counts up, looping continuously once full. The wave layer is a Motion-driven SVG with a couple of phased sine functions, so the surface always looks alive without ever feeling busy. The percent readout counts up alongside the fill. It is a charming way to visualise any progress that has a definite goal: an account setup percentage, a usage cap, a download, or a milestone tracker.
Built with
Frequently asked questions
- Is Charging Widget free to use?
- Yes. Charging Widget is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Charging Widget?
- One command: npx shadcn@latest add https://aicanvas.me/r/charging-widget.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Charging Widget for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Charging Widget built with?
- Charging Widget is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Charging Widget?
- Common uses include Dashboard, Settings, and Onboarding. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Charging Widget with AI?
- Yes. Charging Widget ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas