# M scroll progress 3

> Styled bar with percentage — rounded gradient bar with live percentage label

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/m-scroll-progress-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/m-scroll-progress-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/m-scroll-progress-3-light-9ab85777fe3e16d5.png
- Registry item: https://ui.cnippet.dev/r/m-scroll-progress-3.json
- Categories: scroll progress
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/m-scroll-progress-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/scroll-progress`

## Files

### `registry/default/motion-variants/m-scroll-progress-3.tsx`

```tsx
"use client";

import { motion, useScroll, useSpring, useTransform } from "motion/react";
import { ScrollProgress } from "@/registry/default/motion/scroll-progress";

export default function ScrollProgressStyled() {
  const { scrollYProgress } = useScroll();
  const smoothProgress = useSpring(scrollYProgress, {
    damping: 50,
    restDelta: 0.001,
    stiffness: 200,
  });
  const percentage = useTransform(smoothProgress, [0, 1], [0, 100]);

  return (
    <div className="relative flex min-h-50 flex-col items-center justify-start overflow-y-auto px-6">
      <div className="sticky top-0 z-10 flex w-full items-center gap-3 border-border border-b bg-background/80 px-4 py-2 backdrop-blur">
        <ScrollProgress className="h-1.5 flex-1 rounded-full bg-gradient-to-r from-blue-500 via-violet-500 to-pink-500" />
        <motion.span className="shrink-0 text-muted-foreground text-xs tabular-nums">
          {useTransform(percentage, (v) => `${Math.round(v)}%`)}
        </motion.span>
      </div>
      <div className="w-full max-w-lg space-y-4 py-6">
        <h2 className="font-bold text-foreground text-xl">Reading progress</h2>
        {Array.from({ length: 7 }).map((_, i) => (
          <p className="text-muted-foreground text-sm leading-relaxed" key={i}>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
          </p>
        ))}
      </div>
    </div>
  );
}
```