Instant CSS
Tools
Templates
Components
Tailwind Components
Animations
Learn
More
Spin
Animation
A continuous rotation, great for loading indicators.
Reset to Default
HTML
Copy HTML
<div class="spinner"></div>
CSS
Copy CSS
.spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.