Progress
Progress bars and stacked distribution bars for showing completion and breakdown.
Progress bar
Set width on the .fill child to indicate completion.
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress">
<div class="fill" style="width: 65%"></div>
</div>
<div class="progress-bar progress-bar--thick" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Download progress">
<div class="fill" style="width: 45%"></div>
</div>
Default
Thick variant
Near complete
Just started
Stacked bar
Show distribution across categories. Each .segment gets a width.
<div class="stacked-bar">
<div class="segment segment--primary" style="width: 40%"></div>
<div class="segment segment--secondary" style="width: 35%"></div>
<div class="segment segment--muted" style="width: 25%"></div>
</div>
Three-way split
Two-way split