Progress

Display an indicator representing the progress of a task.

/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component, signal } from "@angular/core";
import {
  NgpProgress,
  NgpProgressIndicator,
  NgpProgressLabel,
  NgpProgressTrack,
  NgpProgressValue,
} from "ng-primitives/progress";
import { injectDisposables } from "ng-primitives/utils";

@Component({
  selector: "app-root",
  imports: [
    NgpProgress,
    NgpProgressIndicator,
    NgpProgressTrack,
    NgpProgressLabel,
    NgpProgressValue,
  ],
  styles: `
    [ngpProgress] {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 0.5rem;
      width: 200px;
      box-sizing: border-box;
      padding: 0.5rem;
    }

    [ngpProgressLabel] {
      color: var(--ngp-text-emphasis);
      font-size: 14px;
      font-weight: 600;
    }

    [ngpProgressValue] {
      color: var(--ngp-text-secondary);
      font-size: 14px;
      font-weight: 500;
      text-align: right;
      grid-column-start: 2;
      text-align: end;
    }

    [ngpProgressTrack] {
      grid-column: 1 / 3;
      position: relative;
      height: 12px;
      width: 100%;
      max-width: 320px;
      overflow: hidden;
      border-radius: 0.5rem;
      border: 1px solid var(--ngp-border);
      background-color: var(--ngp-background);
    }

    [ngpProgressIndicator] {
      height: 100%;
      border-radius: 0.5rem;
      background-color: var(--ngp-background-inverse);
      transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  `,
  template: `
    <div [ngpProgressValue]="value()" ngpProgress>
      <span ngpProgressLabel>Loading</span>
      <span ngpProgressValue>{{ value() }}%</span>

      <div ngpProgressTrack>
        <div ngpProgressIndicator></div>
      </div>
    </div>
  `,
})
export class AppComponent {
  /**
   * The value of the progress bar.
   */
  readonly value = signal(0);

  /**
   * Use the disposable helpers to ensure the interval is cleared when the component is destroyed.
   */
  readonly disposables = injectDisposables();

  constructor() {
    this.disposables.setInterval(
      () => this.value.update((value) => (value > 100 ? 0 : value + 1)),
      50,
    );
  }
}

Import

Import the Progress primitives from ng-primitives/progress.

import {
  NgpProgress,
  NgpProgressTrack,
  NgpProgressLabel,
  NgpProgressValue,
  NgpProgressIndicator,
} from 'ng-primitives/progress';

Usage

Assemble the avatar directives in your template.

<div ngpProgress [ngpProgressValue]="percentage">
  <span ngpProgressLabel></span>
  <span ngpProgressValue></span>

  <div ngpProgressTrack>
    <div ngpProgressIndicator></div>
  </div>
</div>

Reusable Component

Create a reusable component that uses the progress directives.

import { Component } from '@angular/core';
import { Progress } from './progress';

@Component({
  selector: 'app-root',
  imports: [Progress],
  template: `
    <app-progress value="50" label="Loading" aria-label="Progress indicator" />
  `,
})
export default class App {}

Schematics

Generate a reusable progress component using the Angular CLI.

ng g ng-primitives:primitive progress

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/progress package:

NgpProgress

Apply the `ngpProgress` directive to an element that represents the progress bar.

• Selector: [ngpProgress]

Data Attributes

The following data attributes are applied to the ngpProgress directive:

NgpProgressIndicator

Apply the `ngpProgressIndicator` directive to an element that represents the current progress. The width of this element can be set to the percentage of the progress value.

• Selector: [ngpProgressIndicator]

Data Attributes

The following data attributes are applied to the ngpProgress directive:

NgpProgressTrack

• Selector: [ngpProgressTrack]
• Exported As: ngpProgressTrack

Data Attributes

The following data attributes are applied to the ngpProgressTrack directive:

NgpProgressLabel

• Selector: [ngpProgressLabel]
• Exported As: ngpProgressLabel

Data Attributes

The following data attributes are applied to the ngpProgressLabel directive:

NgpProgressValue

• Selector: [ngpProgressValue]
• Exported As: ngpProgressValue

Data Attributes

The following data attributes are applied to the ngpProgressValue directive:

Accessibility

Adheres to the WAI-ARIA Progressbar pattern.