Feedback

Progress

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Usage#

app.component.ts

import { WdsProgressComponent } from '@wds/angular/progress';

Examples#

Default#

value between min (0) and max (100) fills the bar; changes animate. Without a visible label, name the bar with label.

Show code

progress-default.ts

import { Component, DestroyRef, afterNextRender, inject, signal } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-default-demo',
  host: { class: 'flex w-full justify-center' },
  imports: [WdsProgressComponent],
  template: `<wds-progress class="w-[60%]" label="Progress" [value]="progress()"></wds-progress>`,
})
export class ProgressDefaultDemo {
  protected readonly progress = signal(13);

  constructor() {
    const destroyRef = inject(DestroyRef);
    afterNextRender(() => {
      const timer = setTimeout(() => this.progress.set(66), 500);
      destroyRef.onDestroy(() => clearTimeout(timer));
    });
  }
}

Label#

The content is a label above the bar and names it. show-value adds the percentage, formatted in the language of the page (lang).

Upload progress

Show code

progress-label.ts

import { Component } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-label-demo',
  imports: [WdsProgressComponent],
  template: `
    <wds-progress class="w-full max-w-sm" value="56" show-value>Upload progress</wds-progress>
  `,
})
export class ProgressLabelDemo {}

Value text#

value-text replaces the percentage, for screen readers too. With max the value can count anything, e.g. files.

Uploading files

Show code

progress-value-text.ts

import { Component } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-value-text-demo',
  imports: [WdsProgressComponent],
  template: `
    <wds-progress class="w-full max-w-sm" value="3" max="5" show-value value-text="3 of 5 files">Uploading files</wds-progress>
  `,
})
export class ProgressValueTextDemo {}

Indeterminate#

Without value (or with null) the bar is indeterminate: the task runs, but its progress is unknown.

Loading data

Show code

progress-indeterminate.ts

import { Component } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-indeterminate-demo',
  imports: [WdsProgressComponent],
  template: `
    <wds-progress class="w-full max-w-sm">Loading data</wds-progress>
  `,
})
export class ProgressIndeterminateDemo {}

Controlled#

The bar follows value set by the app.

Profile completion

−10

+10

Show code

progress-controlled.ts

import { Component, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-controlled-demo',
  host: { class: 'flex w-full justify-center' },
  imports: [WdsButtonComponent, WdsProgressComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-4">
      <wds-progress [value]="value()" show-value>Profile completion</wds-progress>
      <div class="flex justify-end gap-2">
        <wds-button variant="outline" size="sm" [disabled]="value() === 0" (click)="step(-10)">−10</wds-button>
        <wds-button variant="outline" size="sm" [disabled]="value() === 100" (click)="step(10)">+10</wds-button>
      </div>
    </div>
  `,
})
export class ProgressControlledDemo {
  protected readonly value = signal(50);

  protected step(delta: number): void {
    this.value.update((v) => Math.min(100, Math.max(0, v + delta)));
  }
}

Height and color#

--wds-progress-height sets the height of the track, --wds-progress-indicator and --wds-progress-track the colors.

Storage

Backup

Show code

progress-custom.ts

import { Component } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-custom-demo',
  imports: [WdsProgressComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-6">
      <wds-progress class="[--wds-progress-height:8px]" value="72" show-value>Storage</wds-progress>
      <wds-progress class="[--wds-progress-indicator:var(--color-green-600)]" value="100" show-value>Backup</wds-progress>
    </div>
  `,
})
export class ProgressCustomDemo {}

File upload#

A list of uploads in wds-item: a short bar per file in the actions slot. Each bar is named by label (the file name), and value-text adds the time left for screen readers.

2m 30s

45s

5m 12s

Complete

Show code

progress-file-upload.ts

import { Component } from '@angular/core';
import { WdsItemComponent, WdsItemGroupComponent } from '@wds/angular/item';
import { WdsProgressComponent } from '@wds/angular/progress';

@Component({
  selector: 'app-progress-file-upload-demo',
  imports: [WdsItemGroupComponent, WdsItemComponent, WdsProgressComponent],
  template: `
    <wds-item-group class="w-full max-w-sm">
      <wds-item size="sm" media="icon" heading="document.pdf">
        <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
        <div slot="actions" class="flex items-center gap-3">
          <wds-progress class="w-24" value="45" label="document.pdf" value-text="45%, 2m 30s left"></wds-progress>
          <span class="w-16 text-end text-sm tabular-nums">2m 30s</span>
        </div>
      </wds-item>
      <wds-item size="sm" media="icon" heading="presentation.pptx">
        <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
        <div slot="actions" class="flex items-center gap-3">
          <wds-progress class="w-24" value="78" label="presentation.pptx" value-text="78%, 45s left"></wds-progress>
          <span class="w-16 text-end text-sm tabular-nums">45s</span>
        </div>
      </wds-item>
      <wds-item size="sm" media="icon" heading="spreadsheet.xlsx">
        <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
        <div slot="actions" class="flex items-center gap-3">
          <wds-progress class="w-24" value="12" label="spreadsheet.xlsx" value-text="12%, 5m 12s left"></wds-progress>
          <span class="w-16 text-end text-sm tabular-nums">5m 12s</span>
        </div>
      </wds-item>
      <wds-item size="sm" media="icon" heading="image.jpg">
        <svg slot="media" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
        <div slot="actions" class="flex items-center gap-3">
          <wds-progress class="w-24" value="100" label="image.jpg" value-text="100%, complete"></wds-progress>
          <span class="w-16 text-end text-sm tabular-nums">Complete</span>
        </div>
      </wds-item>
    </wds-item-group>
  `,
})
export class ProgressFileUploadDemo {}

Steps#

Progress of a multi-step setup: value-text counts the steps instead of a percentage, and a read-only Stepper below lists them with their state.

Setup progress

Show code

progress-steps.ts

import { Component } from '@angular/core';
import { WdsProgressComponent } from '@wds/angular/progress';
import { WdsStepperComponent, WdsStepperItemComponent } from '@wds/angular/stepper';

@Component({
  selector: 'app-progress-steps-demo',
  imports: [WdsProgressComponent, WdsStepperComponent, WdsStepperItemComponent],
  template: `
    <div class="flex w-full max-w-xs flex-col gap-4">
      <wds-progress value="50" show-value value-text="2 of 4 steps">Setup progress</wds-progress>
      <wds-stepper value="3" orientation="vertical" readonly class="[--wds-stepper-indicator-size:24px]" aria-label="Setup steps">
        <wds-stepper-item heading="Account"></wds-stepper-item>
        <wds-stepper-item heading="Profile"></wds-stepper-item>
        <wds-stepper-item heading="Preferences"></wds-stepper-item>
        <wds-stepper-item heading="Review"></wds-stepper-item>
      </wds-stepper>
    </div>
  `,
})
export class ProgressStepsDemo {}

API References#

wds-progress#

Shows how far a task has come, as a bar. Without value the bar is indeterminate (the task is running, but its progress is unknown).

Attributes

Attribute	Type	Default	Description
value	number \| null	null	Current value between `min` and `max`. Leave it out (or set `null`) for an indeterminate bar.
min	number	0	Smallest value.
max	number	100	Largest value (the task is complete).
show-value.showValue	boolean	false	Shows the value next to the label (a percentage, or `value-text`).
value-text.valueText	string	''	Text of the value instead of a percentage, e.g. `3 of 5 files`; also read by screen readers.
label	string	''	Accessible name when there is no label in the slot.

Slots

Slot	Description
(default)	Label above the bar; it names the progress bar.

CSS parts (::part)

Part	Description
root	The `progressbar` element (label, value and track).
label	The label.
value	The value text (with `show-value`).
track	The track.
indicator	The filled part.

CSS custom properties

Property	Description
--wds-progress-height	Height of the track (default 4px).
--wds-progress-track	Color of the track.
--wds-progress-indicator	Color of the filled part.

Accessibility#

The bar is a progressbar with aria-valuenow, aria-valuemin and aria-valuemax; screen readers announce the percentage. value-text becomes aria-valuetext.

The label in the slot names the bar (aria-labelledby); without it, set label. The visible value is hidden from screen readers, since the bar already announces it.

An indeterminate bar has no aria-valuenow. With reduced motion its animation is slower.

Screen readers do not announce every change. For a long task, announce key moments (e.g. completion) in a live region or a toast.

Keyboard support#

The progress bar is not focusable and has no keyboard interaction.

Usage#

Examples#

Default#

Label#

Value text#

Indeterminate#

Controlled#

Height and color#

File upload#

Steps#

API References#

wds-progress#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#