States in Blazor ProgressBar Component

17 Dec 20221 minute to read

In this section, the progress can be visualized in different states.


This is the default progress state, which can be used when the estimated progress is known.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Minimum="0" Maximum="100">

Blazor Determinate ProgressBar


When the progress cannot be estimated or calculated, the indeterminate state of the Progress Bar can be used to set the IsIndeterminate property to true. It can be combined with the determinate mode to know the estimating progress before the actual progress starts.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="20" Height="60" IsIndeterminate="true" Minimum="0" Maximum="100">

Blazor Indeterminate ProgressBar


When the SecondaryProgress property value is set to true, the secondary progress indicator becomes visible, and the primary progress is dependent on it. Users will be able to view both the primary and the secondary progress simultaneously.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="40" Height="60" SecondaryProgress="60" Minimum="0" Maximum="100">

Blazor Buffer ProgressBar


The active animate indicator for the estimated progress can be enabled by setting the IsActive property to true in the SfProgressBar and the Enable property to true in the ProgressBarAnimation.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" IsActive="true" Value="40" Height="60" Minimum="0" Maximum="100">
    <ProgressBarAnimation Enable="true"></ProgressBarAnimation>

Blazor Active ProgressBar


The striped visual indicator for the estimated progress can be enabled by setting the IsStriped property to true.


IsStriped property is only applicable for the Linear Type of the Progress Bar.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" IsStriped="true" Value="40" Height="60" Minimum="0" Maximum="100">

Blazor Striped Progress Bar