---
name: nexu-io-stepper
description: "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."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "206bf7d0-544a-46df-b78a-49991af8978f"
  decimalai-version-id: "a4ecf1b0-e731-4b45-a08e-6dd1a301e165"
  decimalai-version: "1"
  decimalai-body-sha256: "e51695d0db9e348a95517e0355a77af2f34f70029c0193a5b979a1bec72937cf"
  decimalai-name: "nexu-io/stepper"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/nexu-io-stepper@1/SKILL.md"
---
# 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).