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