Progress Text for React

Progress Text shows a percentage on a row of reels that wind up from zero to its value like an odometer: the last digit spins, and each digit before it rolls over as the one after it passes nine, so the number counts through every value on the way and settles exactly on its own. Each new value winds on from where the reels are.

Use it for how far something has got: uptime, a goal that's been funded, an upload, a course completed. For any number counted out as text, use Counting Number; for digits that roll straight to a new value, Sliding Number. There's no timer: every reel follows one number that CSS eases, through a transition and keyframes the install adds to your stylesheet, with no animation library. With reduced motion the value shows at once.

Installation

Usage

import { ProgressText } from "@/components/ui/progress-text";

<ProgressText value={98} />

Demos

Format

decimals fixes the digits after the point (99.98%), and max is the value that makes 100%: here 2,936 out of 4,000 is 73.4%. The percentage is written in locale, en-US by default, so the server and the browser write it alike; pass your own for its digits and where its percent sign goes, as Turkish writes %64.

Upload

Each new value winds the reels on from where they are, so a figure that changes often moves smoothly between its steps. trigger="mount" winds it up as soon as the page shows it rather than once it scrolls into view, and duration is one wind, 1400 ms by default. Here it sits beside a Progress bar.

Accessibility

Screen readers read the percentage once, formatted (98%), from a visually hidden copy; the reels are hidden from them. It doesn't announce changes by itself: next to a progress bar, the bar is what assistive technology follows, so give it a label. Every reel is as wide as a digit, so the number never shifts as the reels turn. With reduced motion the value shows at once.

FAQ

API Reference