# `PhiaUi.Components.PageProgress`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/page_progress.ex#L1)

Reading progress bar fixed at the top or bottom of the page.

Uses the `PhiaPageProgress` hook from `priv/templates/js/hooks/page_progress.js`.
The hook listens to scroll events and updates `this.el.style.width` and
`aria-valuenow` based on the percentage of the page scrolled.

The element starts with `w-0` — the hook drives all width changes via inline style.

# `page_progress`

Renders a reading progress bar fixed to the top or bottom of the page.

The bar starts at `w-0` and grows to full width as the user scrolls.
The PhiaPageProgress hook drives width changes via inline style updates.

## Attributes

* `id` (`:string`) - Required for phx-hook. Defaults to `"page-progress"`.
* `variant` (`:atom`) - Defaults to `:default`. Must be one of `:default`, `:gradient`, or `:thin`.
* `position` (`:atom`) - Defaults to `:top`. Must be one of `:top`, or `:bottom`.
* `color` (`:any`) - Optional inline background color override. Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*