Scroll Progress Bar

Note: The scroll progress is shown below the navbar of the page.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia culpa ullam voluptate, eos natus laborum aperiam eius nesciunt quasi, soluta laboriosam doloremque aspernatur tempore rem distinctio commodi eum doloribus ipsum, maxime consequuntur ipsam! Magni sit minima labore similique, deserunt maiores nobis voluptates, porro explicabo possimus iure libero impedit illum iusto quibusdam voluptas ad aspernatur illo, asperiores quo sequi autem consectetur cum? Perferendis expedita ullam alias aspernatur nesciunt delectus saepe veritatis a dolore. Tempore aperiam non eligendi illum assumenda voluptate, ipsa qui dolorem molestiae animi suscipit eum saepe reprehenderit quae perferendis, laborum maiores cumque, atque enim a. Atque quod in accusantium, labore eaque tempora omnis facilis. Culpa, quaerat? Harum magni adipisci, qui repudiandae ipsa illo, deserunt ipsum non at explicabo blanditiis soluta repellat cumque. Repellendus excepturi eaque mollitia illum quia ea veniam debitis earum nostrum laboriosam eos, quidem, cupiditate vel est porro quae. Fugit, qui atque? Accusantium quod corrupti, odio voluptate nesciunt numquam voluptates sit cupiditate inventore culpa. Vitae impedit molestiae quasi, dolorem cum tempora eaque. Maiores rerum voluptatum laboriosam porro, delectus reprehenderit incidunt. Ipsum ducimus illum tempora, quidem alias asperiores et placeat voluptatum nisi blanditiis adipisci repellat magnam labore! Cumque sit reprehenderit eveniet culpa aspernatur et quos amet perspiciatis dolorem!

Installation

Copy and paste the following code into your project.

components/snippet/scroll-progress-bar.tsx

import { cn } from '@/lib/utils'
import { motion, useScroll, useSpring } from 'framer-motion'
 
interface ScrollProgressBarProps {
    className?: string
}
 
export function ScrollProgressBar({
    className,
}: ScrollProgressBarProps) {
    const { scrollYProgress } = useScroll()
 
    const scaleX = useSpring(scrollYProgress, {
        stiffness: 200,
        damping: 50,
        restDelta: 0.001,
    })
 
    return (
        <motion.div
            className={cn('fixed left-0 right-0 top-0 h-1 origin-left bg-gradient-to-r from-[#87c5ff] via-[#8ca4f3] to-[#A97CF8] z-[1000]', className)}
            style={{
                scaleX,
            }}
        />
    )
}