Progress ​

Bootstrap

Determinate progress only. Markup and sizes below; usage → Rules.

  • Label row: small fw-semibold + small font-monospace percent above the track.
  • Track: progress + size modifier; fill progress-bar; set role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax, aria-label (or visible label).
  • Default height: progress-sm (plain progress matches sm).
Import prospects75%
html
<div class="d-flex align-items-baseline justify-content-between mb-2">
  <span class="small fw-semibold">Import prospects</span>
  <span class="small font-monospace">75%</span>
</div>
<div
  class="progress progress-sm"
  role="progressbar"
  aria-label="Import prospects"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="progress-bar w-75"></div>
</div>

Sizes ​

Sqrl custom

Modifier on the track (progress): progress-sm (default), progress-md, progress-lg.

Small (4px)40%
Medium (6px)60%
Large (8px)85%
html
<div
  class="progress progress-md"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="progress-bar" style="width: 60%"></div>
</div>

Rules ​

When to use ​

Known completion (import, export, multi-step job) — always show a percentage, never indeterminate animation.

Accessibility ​

aria-valuenow and label on the track; keep the visible percent in sync.

Size ​

One size per bar; progress-md / progress-lg when the bar needs more weight (e.g. import panel header).