Scroll Progress

A fixed top bar that tracks page or element scroll position.

Scroll this box to see the progress bar update at the top.

Paragraph 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 2 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 3 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 4 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 5 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 6 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 7 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 8 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 9 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph 10 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Installation

Add the scroll progress component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/scroll-progress.json

Usage

import { ScrollProgress } from "@/components/ui/scroll-progress"

// Page-level (tracks window scroll)
<ScrollProgress className="fixed top-0 left-0 right-0 z-50" />

// Element-level
const ref = useRef(null)
<div ref={ref} className="overflow-y-auto h-80">
  <ScrollProgress target={ref} />
  {/* content */}
</div>

Examples

In a scrollable container

Pass a ref to track element scroll instead of window

Scroll down to see the bar fill.

Paragraph 1 — Lorem ipsum dolor sit amet.

Paragraph 2 — Lorem ipsum dolor sit amet.

Paragraph 3 — Lorem ipsum dolor sit amet.

Paragraph 4 — Lorem ipsum dolor sit amet.

Paragraph 5 — Lorem ipsum dolor sit amet.

Paragraph 6 — Lorem ipsum dolor sit amet.

Paragraph 7 — Lorem ipsum dolor sit amet.

Paragraph 8 — Lorem ipsum dolor sit amet.

Paragraph 9 — Lorem ipsum dolor sit amet.

Paragraph 10 — Lorem ipsum dolor sit amet.

Code

"use client"
import { useRef } from "react"
import { ScrollProgress } from "@/components/ui/scroll-progress"

function MyPage() {
  const ref = useRef(null)
  return (
    <div>
      <ScrollProgress target={ref} />
      <div ref={ref} className="h-80 overflow-y-auto">
        {/* long content */}
      </div>
    </div>
  )
}