Search results

States in Blazor ProgressBar component

14 Apr 2021 / 2 minutes to read

Visualize progress in different states.

Determinate

This is the default state and can use it, when the progress estimation is known.

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

progress bar

Indeterminate

By enabling the IsIndeterminate property to true, the state of the progress bar can be changed to indeterminate when the progress cannot be estimated or is not being calculated. It can be combined with determinate mode to know that the application is estimating progress before the actual progress starts.

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

progress bar

Buffer

By setting the SecondaryProgress property value, can make to visible the secondary progress indicator, which the primary progress depends on the secondary progress. This will allow users to visualize both primary and secondary progress simultaneously.

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

progress bar

Active

Can use a active animate indicator for estimated progress by setting the IsActive property to true and Enable the animation to true in ProgressBarAnimation.

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

progress bar

Striped

Can use a striped visual indicator for estimated progress by setting the IsStriped property to true.

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

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

progress bar