Progress Bar
An indeterminate progress bar strip that slides back and forth inside a track. Ideal for showing ongoing background operations like file uploads, API calls, or build processes.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
progressbarindeterminateloading
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An indeterminate progress bar strip for showing ongoing background operations.
CSS
css
.track {
width: 240px;
height: 6px;
background: #27272a;
border-radius: 3px;
overflow: hidden;
}
.fill {
height: 100%;
width: 30%;
background: #3b82f6;
border-radius: 3px;
animation: run 1.2s ease-in-out infinite;
}
@keyframes run {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="track"><div class="fill"></div></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.track {
width: 240px;
height: 6px;
background: #27272a;
border-radius: 3px;
overflow: hidden;
}
.fill {
height: 100%;
width: 30%;
background: #3b82f6;
border-radius: 3px;
animation: run 1.2s ease-in-out infinite;
}
@keyframes run {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="track"><div class="fill"></div></div>
</body>
</html>