Scroll Progress
Open in
Default (Viewport Scroll)
A primary-colored progress bar at the top of the viewport. Check the top of your screen as you scroll this page!

Scroll this page to see the progress bar at the top

Custom Color
Use any Tailwind background color class to customize the progress bar
Reactcustom-color.tsx
<ScrollProgress color="bg-accent" /><ScrollProgress color="bg-destructive" /><ScrollProgress color="bg-green-500" />
Bottom Position
Position the progress bar at the bottom of the viewport
Reactbottom-position.tsx
<ScrollProgress position="bottom" />
Custom Height
Adjust the thickness of the progress bar
Reactcustom-height.tsx
<ScrollProgress height={1} /><ScrollProgress height={4} /><ScrollProgress height={8} />
Container Scroll
Track scroll progress of a specific container instead of the viewport

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac rhoncus quam. Fringilla quam urna. Cras turpis elit, euismod eget ligula quis, imperdiet sagittis justo.

In viverra fermentum ex ac vestibulum. Aliquam eleifend nunc a luctus porta. Mauris laoreet augue ut felis blandit, at iaculis odio ultrices. Nulla facilisi.

Sub-header

Vestibulum cursus ipsum tellus, eu tincidunt neque tincidunt a. In eget sodales arcu, consectetur efficitur metus. Duis efficitur tincidunt odio, sit amet laoreet massa fringilla eu.

Pellentesque id lacus pulvinar elit pulvinar pretium ac non urna. Mauris id mauris vel arcu commodo venenatis. Aliquam eu risus arcu.

Proin sit amet lacus mollis, semper massa ut, rutrum mi. Sed sem nisi, luctus consequat ligula in, congue sodales nisl.

Vestibulum bibendum at erat sit amet pulvinar. Pellentesque pharetra leo vitae tristique rutrum. Donec ut volutpat ante, ut suscipit leo.

Another section

Maecenas quis elementum nulla, in lacinia nisl. Ut rutrum fringilla aliquet. Pellentesque auctor vehicula malesuada. Aliquam id feugiat sem, sit amet tempor nulla.

Quisque fermentum felis faucibus, vehicula metus ac, interdum nibh. Curabitur vitae convallis ligula. Integer ac enim vel felis pharetra laoreet.

Morbi ut scelerisque nibh. Integer auctor, massa non dictum tristique, elit metus efficitur elit, ac pretium sapien nisl nec ante. In et ex ultricies, mollis mi in, euismod dolor.

Quisque convallis ligula non magna efficitur tincidunt. Scroll to see the progress!

Features

  • Smooth scroll progress animation using Motion
  • Automatically uses fixed positioning for viewport scroll
  • Supports container scroll with flexible positioning (sticky, absolute, etc.)
  • Tracks viewport scroll or specific container scroll
  • Customizable height (1px to any size)
  • Customizable color using Tailwind classes
  • Lightweight and performant
  • TypeScript support with full type safety
  • Extends motion.div for additional animation props
  • Zero dependencies beyond motion/react

Component Props

ScrollProgress

  • height - number (default: 2) - Height of the progress bar in pixels
  • color - string (default: "bg-primary") - Tailwind background color class
  • position - "top" | "bottom" (default: "top") - Position of the progress bar
  • container - React.RefObject<HTMLElement> - Optional container element to track scroll for. If not provided, tracks viewport scroll
  • className - string - Additional CSS classes
  • ...props - Extends motion.div props for advanced customization

Positioning Note:

For viewport scroll, the component automatically uses fixed positioning.

For container scroll, use sticky positioning via className and place the progress bar outside the scrollable container.

Dependencies

motion@12