Web Components Linear Progress Overview

The Ignite UI for Web Components Linear Progress Indicator component provides a visual indicator of an application’s process as it changes. The LinearProgress indicator updates its appearance as its state changes. Also, you can style this component with a choice of colors in stripes or solids.

Web Components Linear Progress Example

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

Before using the LinearProgress, you need to register it as follows:

import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the LinearProgress is as follows:

<igc-linear-progress value="100"></igc-linear-progress>

Progress Types

You can set the type of your indicator, using the Variant attribute. There are five types of linear progress indicators - primary (default), error, success, info, and warning.

<igc-linear-progress value="100" variant="success"></igc-linear-progress>

Striped Progress

You can make the indicator striped, using the Striped property:

Indeterminate Progress

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

Animation Duration

The AnimationDuration property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds.

<igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>

Text Properties

You can align the default value, using the LabelAlign property. Permitted values are top, bottom, top-start, top-end, bottom-start and bottom-end.

To hide the default label of the progress indicator, use the HideLabel attribute.

The LabelFormat property can be used to customize the LinearProgress default label.

The following sample demonstrates the above configuration:

Dynamic Progress

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

Styling

The LinearProgress component exposes CSS parts for almost all of its inner elements:

Using this CSS parts we have almost full control of the Linear Progress styling.

igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub