Stripe Progress
A copy-paste progress component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
ProgressHTMLCSSany framework
Copy into your project
HTML
<!-- Stripe Progress Bar -->
<div class="nuda-stripe-progress" role="progressbar"
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"
aria-label="65% complete">
<div class="nuda-stripe-progress__bar" style="width: 65%"></div>
</div>CSS
/* Stripe Progress Bar
Animated diagonal stripes moving through the progress fill.
Customize: --stripe-color, --stripe-track, --stripe-height */
.nuda-stripe-progress {
--stripe-color: #6366f1;
--stripe-track: rgba(255, 255, 255, 0.1);
--stripe-height: 12px;
width: 100%;
height: var(--stripe-height);
background: var(--stripe-track);
border-radius: calc(var(--stripe-height) / 2);
overflow: hidden;
}
.nuda-stripe-progress__bar {
height: 100%;
background-color: var(--stripe-color);
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%
);
background-size: 16px 16px;
border-radius: inherit;
animation: nuda-stripe-move 0.6s linear infinite;
transition: width 0.3s ease;
}
@keyframes nuda-stripe-move {
to { background-position: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-stripe-progress__bar {
animation: none;
}
}How to use Stripe Progress
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.