Indeterminate Sweep
A copy-paste progress component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
ProgressHTMLCSSany framework
Copy into your project
HTML
<!-- Indeterminate Sweep Progress Bar -->
<div class="nuda-indet-sweep" role="progressbar" aria-label="Loading">
<div class="nuda-indet-sweep__bar"></div>
</div>CSS
/* Indeterminate Sweep Progress Bar
A sweeping bar for unknown-duration tasks (translateX + scaleX, no width).
Customize: --indetsweep-color, --indetsweep-track */
.nuda-indet-sweep {
--indetsweep-color: #e4ff54;
--indetsweep-track: rgba(255, 255, 255, 0.1);
position: relative;
width: 100%;
height: 6px;
background: var(--indetsweep-track);
border-radius: 3px;
overflow: hidden;
}
.nuda-indet-sweep__bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--indetsweep-color);
border-radius: 3px;
transform-origin: left center;
animation: nuda-indet-sweep 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
will-change: transform;
}
@keyframes nuda-indet-sweep {
0% { transform: translateX(-100%) scaleX(0.4); }
50% { transform: translateX(20%) scaleX(0.6); }
100% { transform: translateX(120%) scaleX(0.4); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-indet-sweep__bar { animation: none; transform: translateX(0) scaleX(0.4); }
}How to use Indeterminate Sweep
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.