Progress

A progress component indicates from an ongoing user-initated process.

Default



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

Size



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

Multi Bar



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

Loading



<div class="d-progress d-progress__loading"></div>

Variables

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