Progress Bar

Determinate progress bars for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/progress-bar.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-progress`	Base progress track
`.dsx-progress__bar`	Filled progress indicator
`.dsx-progress__bar--success` / `--warning` / `--error`	Semantic bar colors
`.dsx-progress-wrapper`	Vertical stack for label + bar
`.dsx-progress-wrapper__label`	Small label row above the bar
`.dsx-progress--lg`	Large-height track

Behavior

The track is a grey pill with overflow: hidden.
The bar animates width changes with var(--ds2-transition-base).
Default fill color is var(--ds2-color-main).
Large bars increase track height from 0.5rem to 1rem.

Example

<div class="dsx-progress-wrapper">
  <div class="dsx-progress-wrapper__label">Upload progress</div>
  <div class="dsx-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64">
    <div class="dsx-progress__bar dsx-progress__bar--success" style="width: 64%"></div>
  </div>
</div>

Accessibility notes

Use role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow.
Provide a visible label or accessible name.
This module is determinate only; pair it with clear text when completion is unknown.