We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
A progress component indicates from an ongoing user-initated process.
<div class="d-progress">
<div class="d-progress--bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-progress d-progress__sm">
<div class="d-progress--bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="d-progress">
<div class="d-progress--bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="d-progress d-progress__md">
<div class="d-progress--bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="d-progress d-progress__lg">
<div class="d-progress--bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-progress">
<div class="d-progress--bar has-bg-status-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="d-progress--bar has-bg-status-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="d-progress--bar has-bg-status-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
You can use these variables in a override.css file to customize this component.
| Variable Name | CSS Property |
$progress-bg-color |
background |
$progress-corner-radius |
border-radius |
$progress-sizes-sm-height |
height |
$progress-sizes-default-height |
height |
$progress-sizes-md-height |
height |
$progress-sizes-lg-height |
height |
$progress-bar-spacer |
width |
$progress-bar-bg-color |
background |