CSS-Zone
Three layered rings rotating with offset speeds. Practical example for loaders and state indicators with live preview, HTML structure, and production-ready CSS you can integrate quickly.
Preview
HTML + CSS
<div class="triple-spinner"> <span class="triple-spinner__ring triple-spinner__ring_outer"></span> <span class="triple-spinner__ring triple-spinner__ring_middle"></span> <span class="triple-spinner__ring triple-spinner__ring_inner"></span> </div> <style> .triple-spinner { position: relative; width: 120px; height: 120px; display: grid; place-items: center; color: #5b8def; } .triple-spinner__ring { position: absolute; border-radius: 50%; border: 3px solid transparent; border-top-color: #5b8def; border-right-color: rgba(91, 141, 239, 0.5); border-left-color: rgba(99, 173, 255, 0.4); box-shadow: 0 0 18px rgba(91, 141, 239, 0.25); } .triple-spinner__ring_outer { width: 100%; height: 100%; animation: triple-spin 1.6s linear infinite; } .triple-spinner__ring_middle { width: 78%; height: 78%; animation: triple-spin 1.2s linear infinite reverse; } .triple-spinner__ring_inner { width: 52%; height: 52%; animation: triple-spin 0.9s linear infinite; } @keyframes triple-spin { to { transform: rotate(360deg); } } </style>
Triple spinner is a reusable CSS animation pattern that can be integrated into modern UI without external dependencies. The example includes HTML structure and motion styles that are easy to scale for production components.
Use this effect for state indication, visual focus, or lightweight micro-interactions that support content clarity. Motion should reinforce hierarchy, so keep speed, contrast, and density aligned with your interface goals.
Copy the snippet, adapt spacing and timing to your system tokens, and test behavior on mobile and low-power devices. Add reduced-motion support to keep the component accessible while preserving the same functional meaning.