Progress Bar Wrapper

Progress Bar Wrapper

This showcase groups multiple .dsx-progress-wrapper rows into a scannable workflow pattern with an overall .dsx-progress-indicator and semantic .dsx-status labels.

Live Preview

CSS modules used

• progress-bar.css
• progress-indicator.css
• status.css

Pattern highlights

• Use one .dsx-progress-wrapper per stage or workstream so the bar, percentage, status, and helper copy stay aligned.
• Put the visible percentage in .dsx-progress-wrapper__label, semantic text in .dsx-progress-wrapper__controls, and supporting context in .dsx-progress-wrapper__hints.
• Pair the grouped rows with .dsx-progress-indicator when you need a quick overall completion signal above the list.

Classes

Class	Purpose
.dsx-progress-wrapper	Single grouped progress row inside the stage list
.dsx-progress-wrapper__label	Visible percentage for the row
.dsx-progress-wrapper__controls	Slot for semantic status text
.dsx-progress-wrapper__hints	Stage title and helper copy below the meter
.dsx-progress / .dsx-progress__bar	Determinate linear progress meter
.dsx-progress-indicator	Overall grouped completion summary
.dsx-status	Visible state meaning such as complete, blocked, or queued

Example structure

<section class="progress-group" aria-labelledby="release-stages-title">
  <h2 id="release-stages-title">Release readiness stages</h2>

  <ol class="progress-group__list">
    <li>
      <div class="dsx-progress-wrapper">
        <div
          class="dsx-progress dsx-progress--lg"
          role="progressbar"
          aria-labelledby="stage-content-title stage-content-status"
          aria-describedby="stage-content-note"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="82"
        >
          <span class="dsx-progress__bar" style="width: 82%"></span>
        </div>

        <div class="dsx-progress-wrapper__label">82%</div>

        <div class="dsx-progress-wrapper__controls">
          <span class="dsx-status dsx-status--info" id="stage-content-status">
            In progress
          </span>
        </div>

        <div class="dsx-progress-wrapper__hints">
          <strong id="stage-content-title">Content migration</strong>
          <p id="stage-content-note">18 of 22 templates updated and ready for review.</p>
        </div>
      </div>
    </li>
  </ol>
</section>

Accessibility notes

• Keep a visible stage label and text status next to every progress bar so state is not conveyed by color alone.
• Give each .dsx-progress element its own accessible name with aria-label or aria-labelledby.
• Use aria-valuetext on the summary indicator when the percentage needs extra context, for example “53 percent average completion across five stages”.

When to use

• release readiness or go-live checklists
• multi-step onboarding and intake workflows
• migration or rollout dashboards with several parallel workstreams