Progress

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

Examples

Base

50%

100%

Web Component
HTML Blueprint

<!-- 0% -->
<div class="chi-label">0%</div>
<chi-progress value="0" max="100"></chi-progress>

<!-- 50% -->
<div class="chi-label">50%</div>
<chi-progress value="50" max="100"></chi-progress>

<!-- 100% -->
<div class="chi-label">100%</div>
<chi-progress value="100" max="100"></chi-progress>

To render a progress element, use the progress HTML5 tag. Set the value attribute to indicate the current progress.

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

Contextual

Progress in Modals

Web Component
HTML Blueprint

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<!-- Trigger -->
<button id="modal-trigger" class="chi-button chi-modal__trigger" data-target="#modal">
  Launch center modal
</button>

<!-- Modal -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <div class="chi-modal__content">
        <div class="chi-label" id="example-2">50%</div>
        <progress aria-labelledby="example-2" value="50" max="100"></progress>
      </div>
    </section>
  </div>
</div>

<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger'));</script>

Semantic States

Use semantic colors to communicate meaning to users. Use green (-success) for positive, blue (base state) for informative, red (-danger) for negative, and yellow (-warning) for needs attention.

Success

Warning

Danger

Web Component
HTML Blueprint

<!-- Success -->
<div class="chi-label">Success</div>
<chi-progress value="75" max="100" state="success"></chi-progress>

<!-- Warning -->
<div class="chi-label">Warning</div>
<chi-progress value="50" max="100" state="warning"></chi-progress>

<!-- Danger -->
<div class="chi-label">Danger</div>
<chi-progress value="25" max="100" state="danger"></chi-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="50" max="100"></progress>

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

Web Component

Properties

Property	Attribute	Description	Type	Default
`max`	`max`	to set the max value of a progress bar.	`number`	`100`
`state`	`state`	to indicate a progress bar state { info, warning, danger, success }.	`string`	`'info'`
`value`	`value`	to set the value of a progress bar.	`number`	undefined

Accessibility

Accessibility guidelines coming soon