Animate UI

Scroll Progress

A scroll progress component that allows you to track the progress of a scrollable element.

Made by imskyleen
Edit on GitHub
Open in

Scroll to see the progress bar

Installation

Usage

Global

<ScrollProgressProvider global>
  <ScrollProgress />
</ScrollProgressProvider>

Local

<ScrollProgressProvider>
  <ScrollProgress />
  <ScrollProgressContainer>Scrollable content</ScrollProgressContainer>
</ScrollProgressProvider>

API Reference

ScrollProgressProvider

PropTypeDefault
children
React.ReactNode
-
global?
boolean
false
direction?
"horizontal" | "vertical"
vertical
transition?
SpringOptions
{ stiffness: 250, damping: 40, bounce: 0 }

ScrollProgress

PropTypeDefault
asChild?
boolean
false
mode?
"width" | "height" | "scaleY" | "scaleX"
width
...props?
HTMLMotionProps<"div">
-

ScrollProgressContainer

PropTypeDefault
asChild?
boolean
false
...props?
HTMLMotionProps<"div">
-

Built by Skyleen. The source code is available on GitHub.