Components
Loading preview...
The Scroll Progress Bar component enhances user experience by providing a visually dynamic indicator as the user scrolls through the page. It visually informs users how much of the page has been scrolled, making it especially useful for longer content. Unlike static progress bars, this animated indicator offers a more modern and interactive experience. The scroll bar can be configured as a circular or linear bar and can be positioned in specific corners of the page, such as the bottom-right or top-left. Built using Framer Motion and Tailwind CSS, the Scroll Progress Bar ensures smooth transitions and an aesthetically pleasing design.
@bundui
npx shadcn@latest add https://21st.dev/r/bundui/scroll-progress-bar"use client";
import ScrollProgressBar from "@/components/ui/scroll-progress-bar";
function ScrollProgressBarCircleDemo() {
return (
<div className="min-h-[200vh] w-full relative">
<div className="fixed inset-0 flex items-center justify-center pointer-events-none">
<div className="w-full max-w-5xl mx-auto p-4">
<div className="rounded-lg p-8 text-xl w-full h-[500px] border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-black/50 backdrop-blur-sm">
<h2 className="text-2xl font-bold mb-4">Circle Progress Indicator</h2>
<p className="mb-4">Scroll down to see the circle progress indicator in action.</p>
<p className="mb-4">This version shows the percentage and uses the default circle type.</p>
</div>
</div>
</div>
<ScrollProgressBar showPercentage />
<div className="h-[200vh]" aria-hidden="true" />
</div>
)
}
function ScrollProgressBarTopDemo() {
return (
<div className="min-h-[200vh] w-full relative">
<div className="fixed inset-0 flex items-center justify-center pointer-events-none">
<div className="w-full max-w-5xl mx-auto p-4">
<div className="rounded-lg p-8 text-xl w-full h-[500px] border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-black/50 backdrop-blur-sm">
<h2 className="text-2xl font-bold mb-4">Top Bar Progress Indicator</h2>
<p className="mb-4">Scroll down to see the top bar progress indicator in action.</p>
<p className="mb-4">This version uses the bar type with a custom color.</p>
</div>
</div>
</div>
<ScrollProgressBar type="bar" color="#3b82f6" strokeSize={4} />
<div className="h-[200vh]" aria-hidden="true" />
</div>
)
}
function ScrollProgressBarCustomDemo() {
return (
<div className="min-h-[200vh] w-full relative">
<div className="fixed inset-0 flex items-center justify-center pointer-events-none">
<div className="w-full max-w-5xl mx-auto p-4">
<div className="rounded-lg p-8 text-xl w-full h-[500px] border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-black/50 backdrop-blur-sm">
<h2 className="text-2xl font-bold mb-4">Custom Position Progress</h2>
<p className="mb-4">Scroll down to see the circle progress indicator in action.</p>
<p className="mb-4">This version uses a custom position and color.</p>
</div>
</div>
</div>
<ScrollProgressBar
position="top-left"
color="#10b981"
strokeSize={3}
showPercentage
/>
<div className="h-[200vh]" aria-hidden="true" />
</div>
)
}
export { ScrollProgressBarCircleDemo, ScrollProgressBarTopDemo, ScrollProgressBarCustomDemo }