Open Source

Blazor Circular Progress Overview

The Ignite UI for Blazor Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.

Blazor Circular Progress Example

Usage

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));

You will also need to link an additional CSS file to apply the styling to the IgbCircularProgress 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" />

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

<IgbCircularProgress Value=100/>

Progress Types

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

<IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />

Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the Indeterminate property. Also, you can hide the default label of the Ignite UI for Blazor IgbCircularProgress by setting the HideLabel property and customize the progress indicator default label via the exposed LabelFormat property.

<IgbCircularProgress Value=100 Indeterminate=true/>

The following sample demonstrates the above configuration:

Animation Duration

You can use the AnimationDuration property on the IgbCircularProgress component to specify how long the animation cycle should take in milliseconds.

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

Gradient Progress

The progress bar can be customized to use a color gradient instead of a solid color by using the gradient slot and the IgbCircularGradient component, which defines the gradient stops.

For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

<IgbCircularProgress>
    <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
    <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
    <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
</IgbCircularProgress>

Styling

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

Name	Description
`svg`	The progress SVG element.
`gradient_start`	The progress linear-gradient start color.
`gradient_end`	The progress linear-gradient end color.
`track`	The progress ring’s track area.
`fill`	The progress indicator area.
`label`	The progress 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 over the Circular Progress styling.


igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}