# V progress 14

> Reading progress bar

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-progress-14.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/progress`

## Files

### `registry/default/variants/v-progress-14.tsx`

```tsx
"use client";

import { useEffect, useState } from "react";
import {
  Progress,
  ProgressIndicator,
  ProgressTrack,
} from "@/registry/default/ui/progress";

export function Pattern() {
  const [scroll, setScroll] = useState(0);

  useEffect(() => {
    const el = document.getElementById("scroll-article");
    function onScroll() {
      if (!el) return;
      const { scrollTop, scrollHeight, clientHeight } = el;
      const total = scrollHeight - clientHeight;
      setScroll(total > 0 ? (scrollTop / total) * 100 : 0);
    }
    el?.addEventListener("scroll", onScroll);
    return () => el?.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="w-full max-w-xs overflow-hidden rounded-lg border">
      <Progress value={scroll}>
        <ProgressTrack className="h-1 rounded-none">
          <ProgressIndicator className="transition-none" />
        </ProgressTrack>
      </Progress>
      <div
        className="h-44 overflow-y-auto p-4 text-muted-foreground text-sm"
        id="scroll-article"
      >
        <p className="mb-2 font-semibold text-foreground">Reading Progress</p>
        {Array.from({ length: 8 }).map((_, i) => (
          <p className="mb-3 leading-relaxed" key={i}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris.
          </p>
        ))}
      </div>
    </div>
  );
}
```