A gradient ring loader built with pure HTML and CSS that represents loading activity using a circular ring with animated gradient colors, providing a smooth and modern visual indicator without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where continuous loading feedback is needed, such as application boot screens, background processing states, data fetching indicators, or animated progress visuals.
Implementation
The ring animation is created using CSS conic or linear gradients, transforms, and keyframe animations, allowing the gradient to rotate smoothly around a circular path while keeping the loader lightweight and easy to integrate.
HTML
<div class="loader-ring" aria-label="Loading"></div>CSS
.loader-ring {
width: 32px;
height: 32px;
border-radius: 50%;
background: conic-gradient(#6366f1, #22d3ee, #6366f1);
mask: radial-gradient(circle 10px, transparent 98%, #000);
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
.loader-ring {
background: conic-gradient(#818cf8, #22d3ee, #818cf8);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses gradient based circular loading animation
- Smooth, continuous rotational motion
- Lightweight and non-blocking
- Works well in buttons or inline states
- GPU-friendly animation
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.