Striped Flow
A copy-paste progress component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
ProgressHTMLCSSany framework
Copy into your project
HTML
<!-- Striped Flow Progress Bar -->
<div class="nuda-striped-flow" role="progressbar"
aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"
aria-label="68% complete">
<div class="nuda-striped-flow__bar" style="width: 68%"></div>
</div>CSS
/* Striped Flow Progress Bar
Animated diagonal stripes scrolling along the fill (background-position only).
Customize: --stripedflow-color, --stripedflow-track */
.nuda-striped-flow {
--stripedflow-color: #e4ff54;
--stripedflow-track: rgba(255, 255, 255, 0.08);
width: 100%;
height: 12px;
background: var(--stripedflow-track);
border-radius: 6px;
overflow: hidden;
}
.nuda-striped-flow__bar {
height: 100%;
border-radius: 6px;
background-color: var(--stripedflow-color);
background-image: linear-gradient(
45deg,
rgba(9, 9, 11, 0.25) 25%,
transparent 25%,
transparent 50%,
rgba(9, 9, 11, 0.25) 50%,
rgba(9, 9, 11, 0.25) 75%,
transparent 75%
);
background-size: 18px 18px;
animation: nuda-striped-flow 0.7s linear infinite;
transition: width 0.3s ease;
}
@keyframes nuda-striped-flow {
to { background-position: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-striped-flow__bar { animation: none; }
}How to use Striped Flow
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.