Search results
Types in Blazor ProgressBar component
14 Apr 2021 / 1 minute to read
Visualize the progress in different shapes (rectangle, circle or semi-circle) to give a unique appearance.
Linear
By setting the Type property as Linear to get the linear Progress Bar. It also supports the secondary progress, indeterminate, segments and different mode of progress as shown below.
<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Minimum="0" Maximum="100">
</SfProgressBar>
<SfProgressBar Type="ProgressType.Linear" Value="20" Height="60" IsIndeterminate="true" Minimum="0" Maximum="100">
<ProgressBarAnimation Enable="true"></ProgressBarAnimation>
</SfProgressBar>
<SfProgressBar Type="ProgressType.Linear" Value="40" Height="60" SecondaryProgress="60" Minimum="0" Maximum="100">
</SfProgressBar>
<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" SegmentCount="8" Minimum="0" Maximum="100">
</SfProgressBar>
Circular
By setting Type property as Circular to get the Circular Progress Bar. It also supports the secondary progress, indeterminate, segments, pie progress and different mode of progress as shown below.
<SfProgressBar Type="ProgressType.Circular" Value="100" Height="60" Minimum="0" Maximum="100">
</SfProgressBar>
<SfProgressBar Type="ProgressType.Circular" Value="20" Height="60" IsIndeterminate="true" Minimum="0" Maximum="100">
<ProgressBarAnimation Enable="true"></ProgressBarAnimation>
</SfProgressBar>
<SfProgressBar Type="ProgressType.Circular" Value="40" Height="60" SecondaryProgress="60" Minimum="0" Maximum="100">
</SfProgressBar>
<SfProgressBar Type="ProgressType.Circular" Value="100" Height="60" SegmentCount="8" Minimum="0" Maximum="100">
</SfProgressBar>
<SfProgressBar Type="ProgressType.Circular" Value="80" Height="60" EnablePieProgress="true" Minimum="0" Maximum="100">
</SfProgressBar>
Thank you for your feedback and comments.We will rectify this as soon as possible!