Pricing

Scroll Progress

Animated Scroll Progress for your pages

2,445

Bookmarks

10,645

Installs

7,245

Views

12 lines
import { ScrollProgress } from "@/components/ui/scroll-progress"

export default function ScrollProgressDemo() {
  return (
    <div className="z-10 rounded-lg p-4">
      <ScrollProgress className="top-[65px]" />

6 more lines behind a plan

Previews are free to watch. Reading and copying the full source needs a plan.

See plans
Dependencies
motion
License
MIT License
Published
1/19/2025
Categories

Similar components

That's all 6 components

Explore more

Part of Magic UI — browse the full library on Nuxus.