Atom
AI Pass+loader#orbit#gradient
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 Atom
Three elliptical orbits with electrons tracing each path via SVG animateMotion around a gradient nucleus — a pure-CSS/SVG scientific loader with a light default theme.
Features
- Three elliptical orbit rings drawn as inline SVG paths
- Electrons trace each orbit via SVG
animateMotionalong a shared path - Gradient nucleus filled from the signature two-color gradient
- Design-system agnostic — every color, size and radius reads from tokens
- Light theme by default with a full dark palette applied via
body.dark - Responsive layout that adapts spacing down to 480px
- Fully respects
prefers-reduced-motion
Accessibility
- Loading role
role="status"witharia-label="Loading"on the loader stage- Reduced motion
prefers-reduced-motion: reducedisables all animations- Decorative SVG
- Background glow layer marked
aria-hidden="true"
Customise it with AI
Open Atom 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
Nebula
VanillaReact
Three concentric gradient rings spinning at different speeds around a glowing core — a pure-CSS scientific loader with a light default theme.
#loader#orbit#space
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 Scan Loader
VanillaReact
A rotating sweep beam over pinging concentric rings around a pulsing center — a pure-CSS scientific radar loader with a light default theme.
#loader#gradient
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
Dual Ring
VanillaReact
A two-tone gradient ring spinner — solid on two sides, faded on the others — as a pure-CSS loader with light-default theming.
#loader#ring#spinner
Neural Net
VanillaReact
A layered neural network with pulsing nodes and flashing signal connections — a pure-CSS/SVG scientific loader with a light default theme.
#loader#ai#gradient
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
