Audio Wave Loader
AI Pass+loader#wave#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 Audio Wave Loader
Five gradient bars rising and falling like a traveling sine wave — a pure-CSS scientific loader with a light default theme.
Features
- Five bars scaled vertically with a staggered delay for a wave motion
- Bars tinted across the signature gradient from start to end
- GPU-friendly — animates
transformonly, never layout - Design-system agnostic — colors and sizing resolve 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 scanline layer marked
aria-hidden="true"
Customise it with AI
Open Audio Wave Loader 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
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
Progress Ring
VanillaReact
Radial tick marks filling progressively through the gradient — a pure-CSS scientific loader with a light default theme.
#loader#progress#ring
DNA Helix
ReactVanilla
Dot pairs crossing in a rotating double helix with connecting rungs — a pure-CSS scientific loader with a light default theme.
#loader#gradient
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
Cube Fold
ReactVanilla
A rotating 3D cube whose gradient faces fold inward and out — a pure-CSS scientific loader with a light default theme.
#loader#3d#gradient
Dot Triangle
VanillaReact
Three gradient dots cycling around a triangle — a pure-CSS scientific loader with a light default theme.
#loader#dots#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
