States in Blazor ProgressBar Component
17 Dec 20221 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>
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>
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>
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>
Striped
The striped visual indicator for the estimated progress can be enabled by setting the IsStriped property to true.
NOTE
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>