Dot Weave
AI Pass+loader#dots#wave#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 Dot Weave
A token-driven loading animation with two luminous dot strands weaving through a rhythmic wave — fully design-system agnostic.
Features
- Two strands of paired dots weaving through a rhythmic wave built purely from
transformandopacityfor GPU-friendly animation - Faked 3D depth via per-dot
scaleand fade synchronized with the weave cycle - Paired dots phase-offset by half a cycle so the strands cross in a continuous weave
- Staggered timing per pair via explicit position classes for a left-to-right wave
- Automatic transition to an animated success checkmark when loading completes
- Restart control to replay the loading sequence on demand
- Rotating status messages announced to assistive technology via
aria-live - Responsive panel that adapts padding down to 280px
- Fully respects
prefers-reduced-motion
Accessibility
- Live status
aria-live="polite"on the panel announces status changes- Loader role
role="status"witharia-label="Loading"on the helix stage- Keyboard activation
- Restart is a native button, operable with Enter and Space
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Dot Weave 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
Comet
VanillaReact
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.
#loader#pulse#loading
Cube 3D
VanillaReact
A token-driven loading panel with a rotating 3D cube that resolves into an animated success state — fully design-system agnostic.
#loader#3d#loading
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
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
Dot Triangle
VanillaReact
Three gradient dots cycling around a triangle — a pure-CSS scientific loader with a light default theme.
#loader#dots#gradient
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
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
