Progress

The Progress component provides visual indicators for completion status and step-based processes. Optimized for e-ink displays with bitmap patterns for 1-bit displays and solid colors for 4-bit+ displays.

Progress Variants

Progress indicators come in two variants: bar for continuous progress and dots for discrete steps. Each variant supports three sizes (small, default, large) and three emphasis levels.

Bar Progress

The bar variant displays progress as a horizontal filled bar. Use the fill element with inline width styling to set the progress percentage.

Download Progress 75%
Battery Level 90%
Storage Used 50%
Default Emphasis 60%
Emphasis 2 60%
Emphasis 3 60%
Progress Bar Variant 
<!-- Default bar -->
<div class="progress-bar">
  <div class="label">
    <span class="label">Download Progress</span>
    <span class="value value--xxsmall">75%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 75%"></div>
  </div>
</div>

<!-- Small variant -->
<div class="progress-bar progress-bar--small">
  <div class="label">
    <span class="label label--small">Battery Level</span>
    <span class="value value--xxsmall">90%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 90%"></div>
  </div>
</div>

<!-- With emphasis -->
<div class="progress-bar progress-bar--emphasis-2">
  <div class="label">
    <span class="label">Storage Used</span>
    <span class="value value--xxsmall">50%</span>
  </div>
  <div class="track">
    <div class="fill" style="width: 50%"></div>
  </div>
</div>

Dots Progress

The dots variant shows discrete steps. Use dot--filled for completed steps and dot--current for the active step.

Setup Progress 3 of 5
Week Progress Wed
Onboarding 2/4
Default Emphasis 2/3
Emphasis 2 2/3
Emphasis 3 2/3
Progress Dots Variant 
<!-- Default dots -->
<div class="progress-dots">
  <div class="label">
    <span class="label">Setup Progress</span>
    <span class="value value--xxsmall">3 of 5</span>
  </div>
  <div class="track">
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--current"></div>
    <div class="dot"></div>
  </div>
</div>

<!-- Small variant -->
<div class="progress-dots progress-dots--small">
  <div class="label">
    <span class="label label--small">Week Progress</span>
    <span class="value value--xxsmall">Wed</span>
  </div>
  <div class="track">
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--filled"></div>
    <div class="dot dot--current"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

Chart

Visualize data optimized for 1-bit rendering

Previous

Overflow

Handle content overflow in fixed-size containers

Next
Framework Index