Angular Linear Progress Component Overview

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.

Angular Linear Progress Example

Getting Started with Ignite UI for Angular Linear Progress

To get started with the Ignite UI for Angular Linear Progress component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxProgressBarModule in the app.module.ts file:

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxProgressBarModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxLinearProgressBarComponent as a standalone dependency, or use the IGX_LINEAR_PROGRESS_BAR_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-linear-bar [value]="progress"></igx-linear-bar>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES]
    /* or imports: [IgxLinearProgressBarComponent] */
})
export class HomeComponent {
    public progress = 50;
}

Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-linear-bar component.

Using the Angular Linear Progress

To have a better understanding of how everything works, let's create a simple example, like the one in the demo:

<igx-linear-bar [value]="100"></igx-linear-bar>

After that, you should see the demo sample in your browser.

Progress Types

You can set the type of your bar, using the type attribute. There are five types of linear progress bars - default, error, success, info, and warning.

Striped Progress

You can make the bar striped, using the striped property and by setting it to true.

Let's see how we can create different types of progress bars that can be both striped or not.

<div class="linear-container">
    <igx-linear-bar [value]="100" type="default"></igx-linear-bar>
    <igx-linear-bar [value]="100" type="success" [striped]="true"></igx-linear-bar>
    <igx-linear-bar [value]="100" type="error"></igx-linear-bar>
    <igx-linear-bar [value]="100" type="info" [striped]="true"></igx-linear-bar>
    <igx-linear-bar [value]="100" type="warning"></igx-linear-bar>
</div>

So if we set up everything correctly, you should see the following in your browser:

Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.

Animation Duration

The animationDuration input property is used to specify how long the animation cycle should take.

The following example specifies the animation duration set to 5 seconds.

<igx-linear-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-linear-bar>

Text Properties

You can align the text, using the textAlign property. Permitted values are left, center, and right.

To hide the text, use the textVisibility property and set its value to false.

Set the textTop property to true to move the text above the bar.

The text property can be used to customize the value of the text itself.

Let's update our previous sample by using the aforementioned text properties. We will also throw an indeterminate progress bar in the mix.

<div class="linear-container">
    <igx-linear-bar
        type="default"
        [value]="100"
    ></igx-linear-bar>
    <igx-linear-bar
        type="success"
        [value]="100"
        class="indeterminate"
        [indeterminate]="true"
        [striped]="true"
    ></igx-linear-bar>
    <igx-linear-bar
        type="error"
        [value]="100"
        [textAlign]="positionEnd"
        [text]="'Custom text'"
    ></igx-linear-bar>
    <igx-linear-bar
        type="info"
        [value]="100"
        [textVisibility]="false"
        [striped]="true"
    ></igx-linear-bar>
    <igx-linear-bar
        type="warning"
        [value]="100"
        [textTop]="true"
    ></igx-linear-bar>
</div>

And do not forget to import the IgxTextAlign enumerator in your component if you're using the textAlign property.

import { ..., IgxTextAlign } from 'igniteui-angular';
// import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
...

public positionCenter: IgxTextAlign = IgxTextAlign.CENTER;
public positionEnd: IgxTextAlign = IgxTextAlign.END;

Let's take a look at how this turned out:

Note

If the step input value is not defined, the progress update is 1% of the max value. In case you want the progress to be faster, the step value should be greater than (max * 1%), respectfully for slower progress the step should be less than the default progress update.

Note

If the step value is defined greater than the value input, there is only one update, which gets the value that is passed for progress update.

Dynamic Progress

You can dynamically change the value of the progressbar by using external controls like buttons. To achieve this, we can bind the value to a class property:

<div class="linear-container">
    <igx-linear-bar
        [value]="currentValue"
        [max]="100"
    ></igx-linear-bar>

    <div class="button-container">
        <button igxIconButton="flat" (click)="decrementProgress()">
            <igx-icon fontSet="material">remove</igx-icon>
        </button>
        <button igxIconButton="flat" (click)="incrementProgress()">
            <igx-icon fontSet="material">add</igx-icon>
        </button>
    </div>
</div>

Create the methods that increment and decrement the value:

public currentValue: number;

public ngOnInit() {
    this.currentValue = 0;
}

public incrementProgress() {
    this.currentValue += 10;
    if (this.currentValue > 100) {
        this.currentValue = 100;
    }
}

public decrementProgress() {
    this.currentValue -= 10;
    if (this.currentValue < 0) {
        this.currentValue = 0;
    }
}

After completing the steps above, our progressbar should look like this:

Styling

To get started with styling the linear progress bar, we need to import the index file, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the progress-linear-theme and accepts the $track-color, $fill-color-default and $text-color parameters.

$custom-theme: progress-linear-theme(
    $track-color: #D3D3D3,
    $fill-color-default: #ECAA53,
    $text-color: #ECAA53
);

Including Themes

The last step is to include the component theme in our application.

If $legacy-support is set to true, include the component theme like that:

 @include progress-linear($custom-theme);

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

:host {
     ::ng-deep {
        @include progress-linear($custom-theme);
    }
}

If $legacy-support is set to false(default), include the component css variables like that:

@include css-vars($custom-theme);

Note

If the component is using an Emulated ViewEncapsulation, you still have to use :host because you need a global selector in order to override the variables.

:host {
    @include css-vars($custom-theme);
}

Demo

API

• IgxLinearProgressBarComponent
• IgxLinearProgressBarComponent Styles
• IgxTextAlign