Customization

17 Apr 20232 minutes to read

Segments

We can divide a progress bar into multiple segments using a SegmentCount to visualize the progress of multiple sequential tasks.

CSHTML

@(Html.EJS().ProgressBar("container")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(100)
                        .Height("60").SegmentCount(8)
                        .Minimum(0).Maximum(100)
                        .Render())

Thickness

Customize the thickness of the track using TrackThickness, progress using ProgressThickness and secondary progress using SecondaryProgressThickness to render the progress bar with different appearances.

CSHTML

@(Html.EJS().ProgressBar("container").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear)
            .Value(100).ShowProgressValue(true)
            .Width("90%").Height("60").TrackThickness(24).ProgressThickness(24).Minimum(0).Maximum(100).SecondaryProgressThickness(20)
            .LabelStyle(ls => ls.Color("#FFFFFF"))
            .Animation(an => an.Enable(true).Delay(0).Duration(2000))
            .Render())

Radius

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

CSHTML

@(Html.EJS().ProgressBar("container").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(60)
    .TrackThickness(80).ProgressThickness(10).Radius("100%")
    .ProgressColor("white").CornerRadius(Syncfusion.EJ2.ProgressBar.CornerType.Round)
    .Minimum(0).Maximum(100)
    .Render())

InnerRadius

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

CSHTML

@(Html.EJS().ProgressBar("container").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(60)
    .Width("160px").Height("160px").EnableRtl(false)
    .TrackThickness(80).ProgressThickness(10).Radius("100%").InnerRadius("190%")
    .ProgressColor("white").CornerRadius(Syncfusion.EJ2.ProgressBar.CornerType.Round)
    .Minimum(0).Maximum(100)
    .Render())

Progress color and track color

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

CSHTML

@(Html.EJS().ProgressBar("percentage").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear)
            .Value(100).ShowProgressValue(true).TrackColor("#F8C7D8")
            .Width("90%").Height("60").CornerRadius(Syncfusion.EJ2.ProgressBar.CornerType.Round)
            .ProgressColor("#E3165B").TrackThickness(24).ProgressThickness(24).Minimum(0).Maximum(100).SecondaryProgress(60).SecondaryProgressColor("green")
            .Animation(an => an.Enable(true).Delay(0).Duration(2000))
            .LabelStyle(ls => ls.Color("#FFFFFF"))
            .TextRender("textRender")
            .Render())

var textRender = function (args) {
    args.text = '50';
}