Feature/animated progress stepper

[ishita526]

Pull Request Description

Adds an Animated Progress Stepper Component that visually represents multi-step workflows using smooth transitions, animated progress indicators, and interactive step states. This component provides a reusable solution for onboarding flows, checkout processes, setup wizards, and registration forms.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/examples/animated-progress-stepper/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A responsive Animated Progress Stepper Component with completed, active, and upcoming step states enhanced by smooth motion and visual feedback.

How does a developer use it?

<div class="stepper-container">
  <div class="step completed">
    <span class="step-number">1</span>
    <span class="step-label">Account</span>
  </div>

  <div class="step-line completed"></div>

  <div class="step active">
    <span class="step-number">2</span>
    <span class="step-label">Profile</span>
  </div>

  <div class="step-line"></div>

  <div class="step">
    <span class="step-number">3</span>
    <span class="step-label">Verification</span>
  </div>

  <div class="step-line"></div>

  <div class="step">
    <span class="step-number">4</span>
    <span class="step-label">Complete</span>
  </div>
</div>

Why does it fit EaseMotion CSS?

This component follows the EaseMotion CSS philosophy by combining human-readable structure with animation-first interactions. The smooth transitions and state-based visual feedback improve workflow clarity while remaining reusable and lightweight.

---

Demo

• Demo added (demo.html works by opening directly in a browser)

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

This component is implemented using pure HTML and CSS without external dependencies. It focuses on smooth state transitions, responsive design, and reusable workflow patterns suitable for onboarding experiences, setup wizards, checkout flows, and progress tracking interfaces.

Inspired by stepper implementations found in Stripe, GitHub, Linear, Vercel, and modern SaaS dashboards.

Closes #1519

---

Reminder: Only the repository maintainer may merge pull requests.
Do not self-merge, even if you have write access.
Maximum 2 active assigned issues per contributor — unassign extras before opening a PR.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/animated-otp-verification-input

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉