Blazor Linear Progress Overview
The Ignite UI for Blazor Linear Progress Indicator component provides a visual indicator of an application’s process as it changes. The IgbLinearProgress
indicator updates its appearance as its state changes. Also, you can style this component with a choice of colors in stripes or solids.
Blazor Linear Progress Example
Usage
Before using the IgbLinearProgress
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
You will also need to link an additional CSS file to apply the styling to the IgbCalendar
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbLinearProgress Value=100 />
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.
<IgbLinearProgress Value=100 Variant=@ProgressBaseVariant.Success />
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.
<IgbLinearProgress AnimationDuration=5000 Indeterminate=true />
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 IgbLinearProgress
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 IgbLinearProgress
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.
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)
}