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 IgcLinearProgressComponent 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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcLinearProgressComponent);
ts

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

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

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

    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>
html

    Striped Progress

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    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>
html

    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 IgcLinearProgressComponent default label.

    The following sample demonstrates the above configuration:

    EXAMPLE
    TS
    HTML
    index.css
    LinearProgressStyles.css
    Edit in:

    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:

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Styling

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

    Name Description
    track The progress ring's track area.
    fill The progress indicator area.
    striped The progress striped indicator.
    label The progress indicator label.
    value The progress label value.
    indeterminate The progress indeterminate state.
    primary The progress indicator primary state.
    danger The progress indicator error state.
    warning The progress indicator warning state.
    info The progress indicator info state.
    success The progress indicator success state.

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

    EXAMPLE
    TS
    HTML
    index.css
    LinearProgressStyling.css
    Edit in: 

    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)
}
css

    API References

    Additional Resources