Search results

Customization in Blazor ProgressBar component

14 Apr 2021 / 2 minutes to read

Segments

Divide a Progress Bar into multiple segments by setting the SegmentCount property to visualize the progress for multiple sequential tasks.

EnableProgressSegments property divide the progress into multiple segments without the track.

SegmentColor property represents the color of the each segment.

Copied to clipboard
<SfProgressBar Type="ProgressType.Circular" Value="100" Height="180" SegmentCount="8" SegmentColor='new string[] { "#00bdaf", "#2f7ecc", "#e9648e", "#fbb78a" }' Minimum="0" Maximum="100" TrackColor="#696969">
</SfProgressBar>

<SfProgressBar Type="ProgressType.Circular" EnableProgressSegments="true" Value="100" Height="180" SegmentColor='new string[] { "#00bdaf", "#2f7ecc", "#e9648e", "#fbb78a" }' SegmentCount="8" Minimum="0" Maximum="100" TrackColor="#696969">
</SfProgressBar>

progress bar

Thickness

Customize the thickness of the track using TrackThickness property and the progress using ProgressThickness property to render the Progress Bar with different appearances.

Copied to clipboard
<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Width="90%" TrackThickness="24" ProgressThickness="24" ShowProgressValue="true" Minimum="0" Maximum="100">
</SfProgressBar>

progress bar

Radius

The radius of the Progress Bar can be customized using Radius property and the corner radius of progress can be customized by CornerRadius property.

Copied to clipboard
<SfProgressBar Type="ProgressType.Circular" Value="60" Height="160px" Width="160px" EnableRtl="false" TrackColor="#FFD939" Radius="100%" InnerRadius="190%" ProgressColor="white" TrackThickness="80" ProgressThickness="10" CornerRadius="CornerType.Round" Minimum="0" Maximum="100">
</SfProgressBar>

progress bar

InnerRadius

The inner radius of the Progress Bar can be customized using InnerRadius property.

Copied to clipboard
<SfProgressBar Type="ProgressType.Circular" Value="60" Height="160px" Width="160px" EnableRtl="false"
                TrackColor="#FFD939" Radius="100%" InnerRadius="190%" ProgressColor="white" TrackThickness="80" ProgressThickness="10" CornerRadius="CornerType.Round" Minimum="0" Maximum="100">
</SfProgressBar>

progress bar

Progress Color and Track Color

Customize the color of progress and track by using ProgressColor and TrackColor properties.

Copied to clipboard
<SfProgressBar Type="ProgressType.Linear" Value="50" Height="60" Width="90%" TrackColor="#F8C7D8"
        ShowProgressValue="true" InnerRadius="190%" ProgressColor="#E3165B" TrackThickness="24" CornerRadius="CornerType.Round"
        ProgressThickness="24" Minimum="0" Maximum="100">
</SfProgressBar>

progress bar

Range Colors

Enhance the readability of progress by visualising the multiple ranges with different colors, that are mapped to each range.

The colors can be mapped to the specific ranges using the ProgressBarRangeColors, which holds a collection of ProgressBarRangeColor.

The Color property represents the color to the specified range, Start and End property represents start and end range of the color and the IsGradient property represents whether the gradient effect is applied to the color.

Copied to clipboard
<SfProgressBar Value="100" IsGradient="true">
    <ProgressBarRangeColors>
        <ProgressBarRangeColor Start="0" End="25" Color="#00bdaf"></ProgressBarRangeColor>
        <ProgressBarRangeColor Start="25" End="50" Color="#2f7ecc"></ProgressBarRangeColor>
        <ProgressBarRangeColor Start="50" End="75" Color="#e9648e"></ProgressBarRangeColor>
        <ProgressBarRangeColor Start="75" End="100" Color="#fbb78a"></ProgressBarRangeColor>
    </ProgressBarRangeColors>
</SfProgressBar>

progress bar