feat: add ease-scroll-indicator — reading progress bar at top of page

[Pcmhacker-piro]

Closes #1198

---

Pull Request Description

Add a new ease-scroll-indicator component: a reading progress bar fixed at the top of the viewport that dynamically represents scroll progress through page content.

---

Type of Change

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

---

Submission Checklist

• All changes are inside submissions/examples/ease-scroll-indicator/
• 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 reading progress bar that fills from 0% to 100% as the user scrolls. Uses CSS animation-timeline: scroll() in modern browsers with a lightweight JS fallback for broader compatibility. Supports gradient/solid fill, 3 sizes, custom colour via --ease-scroll-color, hidden state when content fits the viewport, dark mode, and reduced motion.

How does a developer use it?

<div class="ease-scroll-indicator" id="scroll-bar"></div>
var bar = document.getElementById('scroll-bar');
document.addEventListener('scroll', function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = height > 0 ? (winScroll / height) * 100 : 0;
  bar.style.width = scrolled + '%';
  bar.classList.toggle('ease-scroll-indicator--hidden', scrolled < 0.5);
}, { passive: true });
Why does it fit EaseMotion CSS?
Reading progress bars are a common UX pattern on blogs, documentation sites, and long-form articles — helping users understand how much content remains. This component fills a gap in EaseMotion's component set with a lightweight, progressively-enhanced implementation.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
CSS uses @supports (animation-timeline: scroll()) for progressive enhancement — modern browsers get the native scroll-driven animation, others get the JS fallback. JS also handles the hidden state when content fits the viewport. Highest z-index token (--ease-z-toast: 9999) ensures it renders above all content. Ready for integration into components/.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/ease-scroll-indicator

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! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check this