Progress

Display an indicator representing the progress of a task.

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">
  <label ngpProgressLabel></label>
  <span ngpProgressValue></span>

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

Reusable Component

Create a reusable component that uses the progress directives.

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

Data Attributes

The following data attributes are applied to the ngpProgress directive:

Attribute	Description
data-progressing	Indicates that the progress is in progress.
data-indeterminate	Indicates that the progress is indeterminate.
data-complete	Indicates that the progress is complete.

NgpProgressIndicator

Data Attributes

The following data attributes are applied to the ngpProgress directive:

Attribute	Description
data-progressing	Indicates that the progress is in progress.
data-indeterminate	Indicates that the progress is indeterminate.
data-complete	Indicates that the progress is complete.

NgpProgressTrack

Data Attributes

The following data attributes are applied to the ngpProgressTrack directive:

Attribute	Description
data-progressing	Indicates that the progress is in progress.
data-indeterminate	Indicates that the progress is indeterminate.
data-complete	Indicates that the progress is complete.

NgpProgressLabel

Data Attributes

The following data attributes are applied to the ngpProgressLabel directive:

Attribute	Description
data-progressing	Indicates that the progress is in progress.
data-indeterminate	Indicates that the progress is indeterminate.
data-complete	Indicates that the progress is complete.

NgpProgressValue

Data Attributes

The following data attributes are applied to the ngpProgressValue directive:

Attribute	Description
data-progressing	Indicates that the progress is in progress.
data-indeterminate	Indicates that the progress is indeterminate.
data-complete	Indicates that the progress is complete.

Accessibility

Adheres to the WAI-ARIA Progressbar pattern.