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.

Demo

Usage

To get started with the Linear Progress Bar Indicator component, you need to import the IgxProgressBarModule in the app.module.ts file:

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';

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

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.

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';
...

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.

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 igxButton="icon" (click)="decrementProgress()">
            <igx-icon fontSet="material">remove</igx-icon>
        </button>
        <button igxButton="icon" (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:

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-theme: igx-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 igx-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 igx-progress-linear($custom-theme);
    }
}

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

@include igx-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 igx-css-vars($custom-theme);
}

Demo


API