RetroProgress
A progress bar with Mac OS 9 candy-stripe pattern in determinate and indeterminate modes.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-progress.json"
Import
import { RetroProgress } from "@/components/ui/retro-progress"Determinate Values
0%
25%
50%
75%
100%
Indeterminate
Edge Cases (clamped)
value={-20} (clamped to 0)
value={150} (clamped to 100)
Custom Width
w-[160px] (Figma default)
w-full (full width)
The candy-stripe pattern uses diagonal repeating gradients in azul shades. Indeterminate mode animates the stripe position.