Progress
A visual indicator of a process's completion level with neumorphic styling.
Installation
$ npx shadcn@latest add "/r/progress.json"
Usage
Sizes
The progress bar is available in different sizes.
Custom Range
You can define a custom maximum value using the max prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The current value of the progress bar. |
| max | number | 100 | The maximum value of the progress bar. |
| size | "sm" | "md" | "lg" | "md" | The size of the progress bar. |
| showValue | boolean | false | Whether to display the percentage value. |
| className | string | - | Additional CSS classes to apply to the container. |