Scroll Progress

PreviousNext

A customizable scroll progress bar with gradient variants, sizes, and optional percentage display.

Installation

pnpm dlx shadcn@latest add https://ui.dalim.in/r/scroll-progress.json

Usage

import { ScrollProgress } from "@/components/ui/scroll-progress"
<div className="relative h-screen w-full overflow-hidden">
  <ScrollProgress variant={"ice"} showPercentage /> 
</div>