<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 |
NavLink Props
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 |