Progress

Live Demo

Basic Progress Bar

With Label

Sizes

Colour Variants

Stepped Progress

Code sample

<!-- Basic progress -->
<div class="caat-progress" role="progressbar"
     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
     aria-label="50% complete">
  <div class="caat-progress__bar" style="width:50%"></div>
</div>

<!-- With label -->
<span class="caat-progress__label">Profile — 65%</span>
<div class="caat-progress caat-progress--lg" role="progressbar"
     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="caat-progress__bar" style="width:65%">65%</div>
</div>

<!-- Stepped progress -->
<ol class="caat-progress-stepped" aria-label="Application progress">
  <li class="caat-progress-stepped__step caat-progress-stepped__step--completed">
    <span class="caat-progress-stepped__indicator"><i class="bi bi-check"></i></span>
    <span class="caat-progress-stepped__label">Personal Info</span>
  </li>
  <li class="caat-progress-stepped__step caat-progress-stepped__step--active" aria-current="step">
    <span class="caat-progress-stepped__indicator">2</span>
    <span class="caat-progress-stepped__label">Plan Details</span>
  </li>
  <li class="caat-progress-stepped__step">
    <span class="caat-progress-stepped__indicator">3</span>
    <span class="caat-progress-stepped__label">Confirmation</span>
  </li>
</ol>

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

• Use concise, descriptive labels: "Profile completion — 65%" rather than "65%" alone.
• For stepped progress, limit steps to 3 – 5 to avoid visual clutter on mobile.
• Step labels should be short (1 – 3 words): "Personal Info", "Plan Details", "Confirmation".
• Always provide an accessible label that makes sense without visual context.
• Use colour variants semantically: green for success/complete, amber for in-progress warnings, red for errors.
• Striped/animated bars are best for indeterminate or in-progress states — avoid on static values.

6. Semantic HTML

Bar variant

<!-- Optional visible label -->
<span class="caat-progress__label" id="prog-label-1">Profile — 65%</span>

<div class="caat-progress caat-progress--lg"
     role="progressbar"
     aria-valuenow="65"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-labelledby="prog-label-1">
  <div class="caat-progress__bar" style="width:65%">65%</div>
</div>

Stepped variant

<ol class="caat-progress-stepped" aria-label="Application progress">
  <li class="caat-progress-stepped__step caat-progress-stepped__step--completed">
    <span class="caat-progress-stepped__indicator" aria-hidden="true">
      <i class="bi bi-check"></i>
    </span>
    <span class="caat-progress-stepped__label">Personal Info</span>
  </li>
  <li class="caat-progress-stepped__step caat-progress-stepped__step--active"
      aria-current="step">
    <span class="caat-progress-stepped__indicator" aria-hidden="true">2</span>
    <span class="caat-progress-stepped__label">Plan Details</span>
  </li>
  <li class="caat-progress-stepped__step">
    <span class="caat-progress-stepped__indicator" aria-hidden="true">3</span>
    <span class="caat-progress-stepped__label">Confirmation</span>
  </li>
</ol>

7. CSS Contract

8. Accessibility

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Notes

• Resource type: caat/components/progress
• Sling Model: ProgressModel — exposes value, label, colour, size, variant, steps[].
• HTL template: progress.html — uses data-sly-test to switch between bar and stepped variants.
• Client library: caat.components.progress — CSS only; no JS required for bar variant. Stepped variant JS optional for dynamic step advancement.
• Policy: Authors can restrict available colour variants and size options per template policy.
• Allowed parents: Layout Container, Form Container, Card Body.

12. Dialog Model

Not authored directly. The progress is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Acceptance Checklist

• Bar renders at 0%, 25%, 50%, 75%, and 100% with correct width.
• All three sizes (sm, default, lg) render at correct heights.
• Colour variants (default, success, warning, danger) display correct fill colours.
• Striped bar shows diagonal pattern; animated stripe moves continuously.
• Animation pauses when prefers-reduced-motion: reduce is active.
• role="progressbar" and aria-valuenow are announced correctly by NVDA and VoiceOver.
• Stepped variant renders completed, active, and upcoming states correctly.
• aria-current="step" is present on the active step.
• Connector line between steps is visually continuous and sits behind indicators.
• Stepped indicator focus ring is visible on keyboard navigation.
• Bar does not render if value is missing (validation enforced in dialog).
• Analytics events (progress-viewed, progress-complete, progress-step-change) fire correctly.
• Cross-browser tested: Chrome, Firefox, Safari, Edge.

14. Definition of Done