Progress

Display an indicator representing the progress of a task.

Import

Import the Progress primitives from ng-primitives/progress.

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

Usage

Assemble the avatar directives in your template.

<div ngpProgress [ngpProgressValue]="percentage">
  <div ngpProgressIndicator [style.width.%]="percentage"></div>
</div>

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]
• Exported As: ngpProgress

Define the progress value. Define the progress max value. Define a function that returns the progress value label.

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]
• Exported As: ngpProgressIndicator