- Basic Usage
- Prop Table
import { Progress } from '@duik/it'import Progress from '@duik/progress'Simple usage of progress bars! Input values from 0 to 1
<Progress fill={0.8} /><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" style="width:80%"></div> </div> ReactHTML Snippet | |
<Progress fill={0.8} lg /><div class="progress progress-lg"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" style="width:80%"></div> </div> ReactHTML Snippet | |
<Progress
fills={[
0.5,
0.3,
0.1
]}
/><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" style="width:50%"></div> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" style="width:30%"></div> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10" style="width:10%"></div> </div> ReactHTML Snippet |
| children | Required: false |
| type: React.ReactNode | |
| className | Required: false |
| type: string | |
| className, e.g. "my-custom-styling" |
| fill | Required: false |
| type: number | |
| Range from 0 to 1 |
| fills | Required: false |
| type: number[] | |
| Array of numbers with range from 0 to 1. Fills are rendered with priority over "fill" property. |
| lg | Required: false |
| type: boolean | |
| Renders thicker bar (8px instead of 4px) |
| ...rest | Required: false |
| type: any | |
| Other properties are passed down to the wrapping element |