A determinate progress bar with moving stripes, a soft glint at the leading edge and a tabular percentage.
brand-assets-v3.zip
48.2 MB · Design team
npx shadcn@latest add https://hyperblur.dev/r/loader-progress-stripes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-progress-stripes.tsx.
import { LoaderProgressStripes } from "@/components/hyperblur/loader-progress-stripes"
<LoaderProgressStripes value={64} label="Uploading brand-assets.zip" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 60 | Progress from 0 to 100. The fill animates to each new value. |
| size | number | 10 | Height of the bar in pixels. |
| color | string | "#2f7bff" | Start color of the fill gradient. |
| accent | string | "#7fb3ff" | End color of the fill gradient. |
| showValue | boolean | true | Show the rounded percentage above the bar, on the right. |
| label | string | Text shown above the bar on the left. Also the accessible name of the progress bar. |