Progress
A horizontal progress bar that indicates completion status at various percentages.
Preview
Animated
Searching hostels... 0%
Static Values
Occupancy - Manali85%
Occupancy - Goa62%
Occupancy - Jaipur40%
Usage
tsx
import { Progress } from "zostel-ui";
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value from 0 to max |
max | number | 100 | Maximum progress value |
className | string | — | Additional CSS classes |
valueType:
numberDefault: 0
Current progress value from 0 to max
maxType:
numberDefault: 100
Maximum progress value
classNameType:
stringDefault: —
Additional CSS classes