Radial Fade

AI Pass+

loader#spinner#radial#gradient

design.md

Preview

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.

Create free account Already have one? Sign in

Code

Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.

Create free account Sign in

Loader component

About Radial Fade

Radial bars fading in sequence around a circle, tinted across the gradient — the classic spinner as a pure-CSS scientific loader.

Ready to build?

300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.

Features

Radial bars arranged around a circle fade in sequence
Bars grouped into gradient thirds from start to end
GPU-friendly — animates opacity only
Design-system agnostic — colors resolve from gradient tokens
Light theme by default with a body.dark dark variant
Responsive layout that adapts spacing down to 480px
Fully respects prefers-reduced-motion

Accessibility

Loading role: role="status" with aria-label="Loading" on the loader stage
Reduced motion: prefers-reduced-motion: reduce disables all animations
Decorative SVG: Background tint layer marked aria-hidden="true"

Customise it with AI

Open Radial Fade 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.

Radial Fade

Preview

AI Assistant

Code

About Radial Fade

Ready to build?

Features

Accessibility

Customise it with AI

Explore Other Components

Dual Ring

DNA Helix

Radar Scan Loader

Infinity

Neural Net

Cube Fold