[Component] Animated Stepper / Step Indicator for multi-step forms and onboarding flows

[Nareshkumawat-star]

Component Request
Add a CSS-only animated stepper/step indicator component for multi-step forms, onboarding wizards, and checkout flows. This is a commonly needed UI pattern not currently in EaseMotion CSS.

Proposed classes

• .ease-stepper — horizontal stepper wrapper
• .ease-stepper--vertical — vertical layout variant
• .ease-stepper__step — individual step container
• .ease-stepper__step--completed — shows filled circle with ✓ checkmark
• .ease-stepper__step--active — shows pulsing ring or highlighted circle
• .ease-stepper__step--upcoming — greyed out, not yet reached
• .ease-stepper__connector — the line between steps (animates fill left-to-right on completion)

Animations

• Completed checkmark: scale-in from 0 to 1
• Connector fill: width: 0% → 100% transition on the ::after pseudo-element
• Active step: subtle pulse ring (similar to notification badge but on the step circle)

CSS custom properties

• --ease-step-color-completed (default: #6366f1)
• --ease-step-color-active (default: #6366f1)
• --ease-step-color-upcoming (default: #d1d5db)
• --ease-step-size — circle diameter (default: 2rem)
• --ease-step-connector-duration (default: 0.4s)

Accessibility: aria-current="step" on active, aria-label on each step circle.

File: components/stepper.css

[github-actions]

Hey @Nareshkumawat-star! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[Harsh2k7]

Code

[github-actions]

⚠️ Stale Assignment Cleanup: @Nareshkumawat-star, it has been more than 24 hours (1 day) since you were assigned to this issue and no open pull request referencing this issue was found. To keep the project moving, you have been unassigned.

If you are still working on this, feel free to claim it again when you are ready to open a pull request!

🔓 Status: This issue is now open and available for anyone to claim by commenting /claim. 🚀

[ArchiGajera]

/claim

[github-actions]

🎉 Assigned! Welcome aboard, @ArchiGajera (GSSoC-26)! 🌟

⏳ Timeframe: You have 24 hours of exclusive time to complete the issue and make a Pull Request. Please submit a PR before claiming any other issue.

💡 Tip: Be sure to check out our CONTRIBUTING.md to get off to a great start.

Happy coding! 🚀✨