Design Kit

Progress

Use progress to display the status of a task or process.

Examples

Base

0%
50%
100%
To render a progress element, use the progress HTML5 tag. Set the value attribute to the amount of work complete.
<!-- 0% -->
<div class="chi-label" id="example-1">0%</div>
<progress aria-labelledby="example-1" value="0" max="100"></progress>

<!-- 50% -->
<div class="chi-label" id="example-2">50%</div>
<progress aria-labelledby="example-2" value="50" max="100"></progress>

<!-- 100% -->
<div class="chi-label" id="example-3">100%</div>
<progress aria-labelledby="example-3" value="100" max="100"></progress>

States

Info
Success
Warning
Danger
To indicate a progress state, use the class -info, -warning, -danger, or -success.
<!-- Info -->
<div class="chi-label" id="example-4">Info</div>
<progress aria-labelledby="example-4" class="-info" value="75" max="100"></progress>

<!-- Success -->
<div class="chi-label" id="example-5">Success</div>
<progress aria-labelledby="example-5" class="-success" value="75" max="100"></progress>

<!-- Warning -->
<div class="chi-label" id="example-6">Warning</div>
<progress aria-labelledby="example-6" class="-warning" value="75" max="100"></progress>

<!-- Danger -->
<div class="chi-label" id="example-7">Danger</div>
<progress aria-labelledby="example-7" class="-danger" value="75" max="100"></progress>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon