States in Blazor ProgressBar Component

4 Aug 20211 minute to read

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

Determinate

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">
</SfProgressBar>

Determinate - Progress Bar

Indeterminate

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">
</SfProgressBar>

Indeterminate - Progress Bar

Buffer

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">
</SfProgressBar>

Buffer - Progress Bar

Active

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>
</SfProgressBar>

Active - Progress Bar

Striped

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">
</SfProgressBar>

Striped - Progress Bar