Progress Bar

Size Variants

2 sizes: sm (8px height) and lg (12px height)

<!-- Small progress bar -->
<div class="elv-progress-bar">
  <div class="elv-progress-bar__track elv-progress-bar__track--sm">
    <div class="elv-progress-bar__fill elv-progress-bar__fill--brand" style="width: 65%"></div>
  </div>
</div>

<!-- Large progress bar -->
<div class="elv-progress-bar">
  <div class="elv-progress-bar__track elv-progress-bar__track--lg">
    <div class="elv-progress-bar__fill elv-progress-bar__fill--brand" style="width: 65%"></div>
  </div>
</div>

Color Variants

2 color treatments: brand (rorange) and primary (purple)

<!-- Brand color -->
<div class="elv-progress-bar__fill elv-progress-bar__fill--brand" style="width: 75%"></div>

<!-- Primary color -->
<div class="elv-progress-bar__fill elv-progress-bar__fill--primary" style="width: 75%"></div>

With Label

Optional label text above progress bar

<div class="elv-progress-bar">
  <div class="elv-progress-bar__label">65% complete</div>
  <div class="elv-progress-bar__track elv-progress-bar__track--sm">
    <div class="elv-progress-bar__fill elv-progress-bar__fill--brand" style="width: 65%"></div>
  </div>
</div>

Progress States

Common progress percentages

In Context

Common usage patterns

Usage Guidelines

• Size Selection: Use sm for inline/compact contexts, lg for prominent progress displays
• Color Choice: Brand (rorange) for primary actions, primary (purple) for completion states
• Labels: Always include descriptive label text for accessibility and context
• Animation: Progress changes smoothly via CSS transition (300ms ease)
• Width: Set fill width dynamically via inline style (JavaScript/server-side)

Accessibility Notes

• ARIA: Add role="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100"
• Live Region: Add aria-live="polite" for dynamic updates announced to screen readers
• Label: Use aria-label or visible label text to describe what's progressing
• Determinate: Only use when progress percentage is known (file uploads, multi-step forms)

<div class="elv-progress-bar" role="progressbar"
     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"
     aria-label="Profile completion">
  <div class="elv-progress-bar__label">65% complete</div>
  <div class="elv-progress-bar__track elv-progress-bar__track--sm">
    <div class="elv-progress-bar__fill elv-progress-bar__fill--brand" style="width: 65%"></div>
  </div>
</div>

Design System Specs