Scroll Progress Bar

PreviousNext

The scroll progress bar adds a dynamic, interactive scrolling indicator, built with Motion and Tailwind CSS, enhancing user experience with smooth transitions.

Docs
bunduicomponent

Preview

Loading preview…
examples/motion/components/scroll-progress-bar/02/page.tsx
import ScrollProgressBar from "../scroll-progress-bar";
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";

export default function ScrollProgressBarExample() {
  return (
    <>
      <ScrollProgressBar type="circle" />
      <div>
        <div className="flex h-screen items-center justify-center gap-2 text-xl">
          Scroll <ChevronDownIcon />
        </div>
        <div className="flex h-screen items-center justify-center gap-2 text-xl">
          Scroll <ChevronDownIcon />
        </div>
        <div className="flex h-screen items-center justify-center gap-2 text-xl">
          Scroll <ChevronUpIcon />
        </div>
      </div>
    </>
  );
}

Installation

npx shadcn@latest add @bundui/scroll-progress-bar-02

Usage

import { ScrollProgressBar02 } from "@/components/scroll-progress-bar-02"
<ScrollProgressBar02 />