Instant CSS
Tools
Templates
Components
Learn
More
Dual Ring
Animation
Two-ring spinner with smooth rotation.
Reset to Default
HTML
Copy HTML
<div class="dual-ring"></div>
CSS
Copy CSS
.dual-ring { width: 56px; height: 56px; border-radius: 50%; border: 5px solid transparent; border-top-color: #4f46e5; border-bottom-color: #4f46e5; animation: dualRingSpin 1.2s linear infinite; } @keyframes dualRingSpin { to { transform: rotate(360deg); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.