A task pill with a striped liquid fill, a wavy leading edge and rolling percent digits. Tap to pause and it squishes and greys out; at 100 it contracts into a green done chip with a drawn check.
Brand assets
48.2 MB
npx shadcn@latest add https://hyperblur.dev/r/micro-progress-pill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-progress-pill.tsx.
import { MicroProgressPill } from "@/components/hyperblur/micro-progress-pill"
<MicroProgressPill value={progress} label="Uploading 3 files" onPausedChange={setPaused} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled progress from 0 to 100. Leave it out to run the built-in timer. | |
| label | string | "Uploading 3 files" | Task name while running. |
| doneLabel | string | "Uploaded" | Text at 100 percent. |
| pausedLabel | string | "Paused" | Status text while paused. |
| speed | number | 9 | Percent per second for the built-in timer and the time left estimate. |
| autoPlay | boolean | false | Restart the built-in timer after it completes, for demos. |
| paused | boolean | Controlled pause state. Pair with onPausedChange. | |
| defaultPaused | boolean | false | Initial pause state when uncontrolled. |
| accent | string | "#2f7bff" | Fill and focus color. |
| onPausedChange | (paused: boolean) => void | Called when the pill is tapped. | |
| onComplete | () => void | Called once each time progress reaches 100. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element, which carries the progressbar role. |