Search results

Customization in Blazor ProgressBar component

03 Aug 2021 / 3 minutes to read

Segments

Divide a progress bar into multiple segments by using the SegmentCount property to visualize the progress for multiple sequential tasks, and the EnableProgressSegments property to divide the progress into multiple segments without the track. Meanwhile, the SegmentColor property represents the color of each segment.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

<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 with Segments

Thickness

The thickness of the track can be customized using the TrackThickness property, and the progress using the ProgressThickness property to render the progress bar with different sizes.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

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

Progress Bar with Thickness

Radius

The radius of the progress bar can be customized using the Radius property, and the progress edges can be customized using the CornerRadius property.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

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

Progress Bar with Radius

Inner Radius

The inner radius of the progress bar can be customized using the InnerRadius property.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

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

Progress Bar with Inner Radius

Progress Color and Track Color

The color of progress and track can be customized using the ProgressColor and the TrackColor properties respectively.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

<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 and Track Bar - Color Customization

Range Colors

Enhance the readability of progress by visualising a multiple ranges with different colors, that are mapped to each range. Colors can be mapped to specific ranges using the ProgressBarRangeColors, which holds a collection of the ProgressBarRangeColor type.

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

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

<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 with Range Colors

RTL

The progress bar supports right-to-left (RTL) rendering, which can be enabled by setting the EnableRtl property to true.

Copied to clipboard
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar EnableRtl="true" Value="50" Type="ProgressType.Linear">
</SfProgressBar>

<SfProgressBar EnableRtl="true" Value="80" Type="ProgressType.Circular">
</SfProgressBar>

Progress Bar - Right-to-Left - RTL