Progress

Linear and circular progress indicators for uploads, form steps, and background tasks. Styles live in scss/components/_progress.scss. Pair with Snackbars for optional timer bars, or Loader when the duration is unknown.

Linear bar

Standalone .progress track with .progress__fill width. Expose role="progressbar" and aria-valuenow when the value is meaningful.

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress">
  <div class="progress__fill" style="width: 50%"></div>
</div>

Heights

.progress--sm (2px) for compact timers; default height 4px for page-level feedback.

Progress bar (label + track)

Wrap the track in .progress-bar with a visible .progress-bar__label. The inner bar uses aria-labelledby so the label is the accessible name.

<div class="progress-bar progress-bar--md" role="group" aria-labelledby="upload-label">
  <p class="progress-bar__label" id="upload-label">Completion: 25%</p>
  <div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-labelledby="upload-label">
    <div class="progress__fill" style="width: 25%"></div>
  </div>
</div>

Progress circle

SVG ring with .progress-circle__track and .progress-circle__fill. Center label is visual only; keep aria-label or aria-valuenow in sync when the value changes.

<div class="progress-circle progress-circle--md" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75 percent complete"><svg class="progress-circle__svg" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
    <circle class="progress-circle__track" cx="50" cy="50" r="45" pathLength="100"></circle>
    <circle class="progress-circle__fill" cx="50" cy="50" r="45" pathLength="100" stroke-dasharray="75 25"></circle>
  </svg><span class="progress-circle__label">75%</span></div>

Live update

Update aria-valuenow, visible labels, and either .progress__fill width or the circle stroke-dasharray when progress changes in your app.

Behavior in your app

Copy docs-site/src/lib/progress-behavior.ts and call wireAllProgress() after load, or update values from your framework when tasks complete.

import { wireAllProgress } from './progress-behavior';

wireAllProgress();

// Linear: aria-valuenow + .progress__fill width
// Circle: aria-valuenow + .progress-circle__fill stroke-dasharray + center label

Class reference

Customize (Sass)

1. 01

   Progress layout

   Override track width, bar heights, and circle sizes before importing components.
   variables

   @use "pimentcss-design-system" with (
     $progress-width: 20rem,
     $progress-height-md: 6px,
     $progress-circle-md: 9rem
   );

2. 02

   Rebuild CSS

   Run after editing _progress.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps