Scroll Progress

A reading-progress indicator that shows bar, ring, number, or segmented views. It updates as the user scrolls, showing progress with visual elements. Use it to help users track their position in long content.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/scroll-progress

npx layro-cli add @educlopez/scroll-progress

npx layro-cli add @educlopez/scroll-progress

bunx layro-cli add @educlopez/scroll-progress

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  useMotionValueEvent,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";
import { type CSSProperties, type RefObject, useState } from "react";