Progress
The Progress visualize the completion status of an operation. It supports different shapes such as circular and linear progress bars, making it suitable for a variety of use cases.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Progress from '@start-base/start-ui/Progress';Usages
Progress
Progress With Label
20%
Progress With Indeterminate
Progress With Variant
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| value | number | Value of the progress | ||
| max | number | 100 | Maximum value of the progress | |
| min | number | 0 | Minimum value of the progress | |
| size | number | Size of the progress | ||
| trackSize | number | Track size of the progress | ||
| determinate | boolean | true | Determinate state of the progress | |
| variant | string | linear | linear circular | Variant of the progress |
| className | string | Classname of the progress | ||
| trackClassName | string | TrackClassName of the progress | ||
| progressClassName | string | ProgressClassName of the progress | ||
| labelClassName | string | LabelClassName of the progress | ||
| label | string | Label of the progress |