Instant CSS
Tools
Templates
Components
Learn
More
Progress Bar
Animation
Indeterminate progress bar that loops smoothly.
Reset to Default
HTML
Copy HTML
<div class="progress"> <div class="bar"></div> </div>
CSS
Copy CSS
.progress { width: 240px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; position: relative; } .progress .bar { position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, #2563eb, #4f46e5); border-radius: inherit; animation: progressSlide 1.5s ease-in-out infinite; } @keyframes progressSlide { 0% { left: -30%; } 100% { left: 100%; } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.