stepper
Stepper Dependency-free, reduced-motion safe.
How to apply
Copy css+js; <div class="stepper" data-step="2"><div class="st">1</div><div class="bar"></div><div class="st">2</div>…</div>. Click to advance (demo).
An animated step indicator fills as you advance — clear progress for a multi-step flow (checkout, onboarding). One per flow. Under prefers-reduced-motion fills without easing.
npx skillmds@latest add xpert-ai/stepper Stepper Dependency-free, reduced-motion safe.
Copy css+js; <div class="stepper" data-step="2"><div class="st">1</div><div class="bar"></div><div class="st">2</div>…</div>. Click to advance (demo).
xpert-ai/xpert-plugins/tree/main/xpertai/apps/motion/assets/upstream/recipes/web/stepper commit c0095ad073