Comet
AI Pass+loader#pulse#loading
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Loader component
About Comet
A token-driven comet loader — a single ring spins with a bright leading arc chasing a faint track, animating only `transform` for GPU-friendly motion. Fully design-system agnostic and motion-safe.
Features
- A bright two-quadrant comet arc racing around a faint hairline track
- Pure
transform: rotateanimation for GPU-friendly, layout-free motion - Magenta diagonal-sweep background layer built from a single
color-mixgradient - Comet ring rendered from JavaScript into a live
role="status"region - Animation pauses automatically while the tab is hidden to save cycles
- Responsive sizing that scales the ring down at the mobile breakpoint
- Fully respects
prefers-reduced-motion
Accessibility
- Loading role
role="status"witharia-label="Loading"on the comet stage- Announced text
- Visually hidden
.cmt-sr-only"Loading" span inside the status region - Decorative glow
- Background glow layer marked
aria-hidden="true" - Decorative ring
- Comet ring marked
aria-hidden="true"— the sr-only span carries the announcement - Focus indicators
:focus-visiblewith--ringoutline via base styles- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Comet in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the loader is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Ripple
VanillaReact
A token-driven ripple loader — two concentric rings expand and fade outward in a continuous pulse, animating only `transform` and `opacity` for GPU-friendly motion. Fully design-system agnostic and motion-safe.
#loader#pulse#loading
Dot Weave
VanillaReact
A token-driven loading animation with two luminous dot strands weaving through a rhythmic wave — fully design-system agnostic.
#loader#dots#wave
Orbital
ReactVanilla
A token-driven loading panel with electrons orbiting a glowing nucleus that resolve into an animated success state — fully design-system agnostic.
#loader#orbit#loading
Radar Loader
VanillaReact
A token-driven loading panel with a sweeping radar dish that scans two concentric rings and resolves into an animated success state — fully design-system agnostic.
#loader#loading
Pulse Dots
VanillaReact
Five gradient dots pulsing in sequence — a pure-CSS scientific loader with a light default theme and dark mode.
#loader#dots#pulse
Spinner
VanillaReact
A token-driven loading panel with a dual-ring spinner, an indeterminate progress track, and a smooth transition to a success state — fully design-system agnostic.
#loader#spinner#loading
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
