Progress Bar
A customizable, pixel-art styled progress bar component.
Basic Usage
import { ProgressBar } from 'pixel-retroui';function App() {return (<ProgressBarsize="md"color="pink"borderColor="black"className="w-full"progress={50}/>);}
Props
Prop | Type | Default | Description |
---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size of the progress bar |
color | string | 'pink' | Color of the progress indicator |
borderColor | string | 'black' | Border color of the progress bar |
progress | number | 0 | Progress value (0-100) |
className | string | '' | Additional CSS classes |
Custom ProgressBar
Customize your progress bar's appearance by selecting a preset theme or creating your own color scheme.
Theme: pop
pop
50%
<ProgressBarsize="md"color="#fefcd0"borderColor="black"className="w-full"progress={50}/>
Additional Examples
Different Sizes with Custom Colors
<ProgressBar size="sm" color="gray" progress={25} className="w-1/3" /><ProgressBar size="md" color="green" progress={50} className="w-1/3" /><ProgressBar size="lg" color="skyblue" progress={75} className="w-1/3" />
Preview: