- Docs
- components
- Progress
Progress
Progress bars show either determinate or indeterminate progress of an operation over time.
The <progress> HTML element can be used to build a progress bar, however it is very difficult to style cross browser. ProgressBar helps achieve accessible progress bars and spinners that can be styled as needed.
Installation
npx shadcn@latest add https://backchanel.com/default/progressReusable Wrapper - Example
If you will use a ProgressBar in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollyProgressBar. This wrapper serves as an excellent starting point for use throughout your codebase.
Component progressbar-reusable not found in registry.
The JollyProgressBar component extends the props of React Aria Progress and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the progress bar |
showValue | boolean | true | Whether to display the progress bar value |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.