Progress

Progress bars with labels, themes, stripes and stacking.

Bootstrap’s progress docs describe the markup and CSS.

Example

Set value, and optionally min and max. The component sets the ARIA attributes. Always give it an accessible name with aria-label.

HTML

<div class="vstack gap-3">
  <bs-progress [value]="0" aria-label="Basic example" />
  <bs-progress [value]="25" aria-label="Basic example" />
  <bs-progress [value]="50" aria-label="Basic example" />
  <bs-progress [value]="75" aria-label="Basic example" />
  <bs-progress [value]="100" aria-label="Basic example" />
</div>

Labels

Content inside the component is the bar’s label. Use valueText for a better screen reader value.

3 / 8

<div class="vstack gap-3">
  <bs-progress
    [value]="files()"
    [max]="8"
    [valueText]="`${files()} of 8 files`"
    aria-label="Upload">
    {{ files() }} / 8
  </bs-progress>
  <div class="d-flex gap-2">
    <button
      type="button"
      bsButton="subtle"
      theme="secondary"
      size="sm"
      (click)="files.set(files() - 1)">
      −
    </button>
    <button
      type="button"
      bsButton="subtle"
      theme="secondary"
      size="sm"
      (click)="files.set(files() + 1)">
      +
    </button>
  </div>
</div>

Themes and stripes

Use theme, striped and animated.

HTML

<div class="vstack gap-3">
  <bs-progress [value]="25" theme="success" aria-label="Success example" />
  <bs-progress [value]="50" theme="info" striped aria-label="Info example" />
  <bs-progress [value]="75" theme="warning" animated aria-label="Warning example" />
  <bs-progress [value]="100" theme="danger" aria-label="Danger example" />
</div>

Stacked

Put several bars in a bsProgressStacked container.

HTML

<div bsProgressStacked>
  <bs-progress [value]="15" aria-label="Segment one" />
  <bs-progress [value]="30" theme="success" aria-label="Segment two" />
  <bs-progress [value]="20" theme="info" aria-label="Segment three" />
</div>

API

BsProgress

Selector: bs-progress

Inputs

Name	Type	Default	Description
`value`	`number`	`0`	Current value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`theme`	`BsTheme \| null`	`null`	Theme color of the bar.
`striped`	`boolean`	`false`	Adds stripes.
`animated`	`boolean`	`false`	Animates the stripes.
`valueText`	`string \| null`	`null`	Human-readable value for screen readers.

BsProgressStacked

Selector: [bsProgressStacked]