A quiet bar under the nav that fills with scroll. Left is the top of the page. Right is the end.
Scroll progress
Left is 0%. Right is 100%.
The line sits under the nav and fills as you move through the page. Scroll this frame to drive it.
Section 1
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
Section 2
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
Section 3
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
Section 4
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
Section 5
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
Section 6
Keep scrolling. The bar under the nav tracks how far you are through this frame, from empty on the left to full on the right.
End of the page
At the bottom the line should read full width.
"use client"import { useRef } from "react"import { Navbar01 } from "@/components/blocks/navbar/navbar-01"import { Progress } from "@/components/motion/progress"export function Example() { const scrollRef = useRef<HTMLDivElement>(null) return ( <div className="flex h-[38rem] flex-col overflow-hidden rounded-xl border"> <Navbar01 /> <Progress target={scrollRef} color="#3b82f6" /> <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto px-5 py-8"> {/* long page content */} </div> </div> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add scroll-progressUsage
import { useRef } from "react"import { Navbar01 } from "@/components/blocks/navbar/navbar-01"import { Progress } from "@/components/motion/progress"const scrollRef = useRef<HTMLDivElement>(null)<> <Navbar01 /> <Progress target={scrollRef} color="#3b82f6" /> <div ref={scrollRef} className="overflow-y-auto"> {/* page */} </div></>Omit target to track the window instead.
API Reference
Progress
| Prop | Type | Default |
|---|---|---|
| target | RefObject<HTMLElement | null> |
| color | string | currentColor |
| height | number | 1 |
| className | string | — |
Also accepts the other native div attributes. Height is in pixels.