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.
<!DOCTYPE html><html><head><title>Simple Linear Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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:
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.
<!DOCTYPE html><html><head><title>Linear Progress Indicator Types</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"variant="primary"></igc-linear-progress><igc-linear-progressvalue="100"variant="success"striped></igc-linear-progress><igc-linear-progressvalue="100"variant="danger"></igc-linear-progress><igc-linear-progressvalue="100"variat="info"striped></igc-linear-progress><igc-linear-progressvalue="100"variant="warning"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
<!DOCTYPE html><html><head><title>Linear Progress Indicator Styles</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressclass="progress-container"value="100"variant="primary"></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="success"indeterminatestriped></igc-linear-progress><igc-linear-progressvalue="100"variant="danger"label-align="bottom-end"label-format="Custom text"></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="info"stripedhide-label></igc-linear-progress><igc-linear-progressclass="progress-container"value="100"variant="warning"label-align="bottom-start"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
.progress-container{
margin-bottom: 15px;
}css
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:
<!DOCTYPE html><html><head><title>Dynamic Linear Progress Indicator</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressid="linearProgress"max="100"value="50"label-align="bottom-start"></igc-linear-progress><divclass="button-container"><igc-icon-buttonid="removeIcon"name="remove"collection="material"></igc-icon-button><igc-icon-buttonid="addIcon"name="add"collection="material"></igc-icon-button></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Linear Progress Indicator Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-progressvalue="100"></igc-linear-progress></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css