Linear Progress

The Ignite UI for Angular Linear Progress Bar Indicator component provides a visual indicator of an application’s process as it changes. The indicator updates its appearance as its state changes. The indicator can be styled with a choice of colors in stripes or solids.

Linear Progress Demo

Usage

<igx-linear-bar [striped]="false" [value]="currentValue" [max]="200">
</igx-linear-bar>

API

Name Type Description
max number Set maximum value that can be passed.
type string Set type of the linear bar. Possible options - default, success, info, warning, and danger.
value number Set value that indicates the completed bar position.
striped boolean Set bar to have striped style.
animate boolean animation on progress bar.

Methods

Name Description
getValue() Return passed value to progress bar to be in range between min(0) and max.
getPercentValue() Calculate the percentage based on passed value.
onProgressChanged Exposed event, which could be handled to track progress changing