Progress Indicator

Progress Indicator

SVG-based circular determinate progress indicators for @bnotk/dsx.

Live Preview

Import

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

Or use the full bundle:

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

Classes

Class	Purpose
.dsx-progress-indicator	Base circular indicator wrapper
.dsx-progress-indicator__circle	SVG track or arc circle
.dsx-progress-indicator__center	Centered percentage text
.dsx-progress-indicator__color--inprogress / --success / --error	Semantic text + stroke colors

Behavior

• The default size is 7.875rem (126px) and can be overridden with --ds2-progress-indicator-size.
• The base circle renders the grey track with var(--ds2-color-grey-6).
• The colored circle uses stroke-dasharray and stroke-dashoffset to show completion.
• Both circles are rotated -90deg so progress starts at the top.

Example

<div class="dsx-progress-indicator" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
  <svg viewBox="0 0 126 126" width="126" height="126" aria-hidden="true">
    <circle class="dsx-progress-indicator__circle" cx="63" cy="63" r="56" stroke-width="8"></circle>
    <circle
      class="dsx-progress-indicator__circle dsx-progress-indicator__color--inprogress"
      cx="63"
      cy="63"
      r="56"
      stroke-width="8"
      stroke-dasharray="351.86"
      stroke-dashoffset="123.15"
    ></circle>
  </svg>
  <span class="dsx-progress-indicator__center dsx-progress-indicator__color--inprogress">65%</span>
</div>

Accessibility notes

• Use role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow.
• Add aria-valuetext when the visual percentage needs more context.
• Keep the center text visible so users are not relying on color alone.