Packages

shadcn/ui-inspired component library for Phoenix LiveView with eject-based distribution. CSS-first theme system, 829 components across 20+ categories — Calendar, Chart, Animation, DnD, Editor, Collaboration, Typography, Navigation, Background, Surface, and more.

Current section

Files

Jump to
phia_ui priv templates js hooks page_progress.js
Raw

priv/templates/js/hooks/page_progress.js

// PhiaPageProgress — reading progress bar
// Reads scroll position, computes percentage, and updates the element's
// inline width style and aria-valuenow attribute.
const PhiaPageProgress = {
mounted() {
this._onScroll = () => this.update()
window.addEventListener('scroll', this._onScroll, { passive: true })
this.update()
},
update() {
const scrollTop = window.scrollY
const docHeight = document.documentElement.scrollHeight - window.innerHeight
const pct = docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0
this.el.style.width = `${pct}%`
this.el.setAttribute('aria-valuenow', Math.round(pct))
},
destroyed() {
window.removeEventListener('scroll', this._onScroll)
}
}
export default PhiaPageProgress