Search results

Customization in ASP.NET MVC ProgressBar control

Segments

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

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

Thickness

You can customize the thickness of the track using TrackThickness and progress using ProgressThickness to render the ProgressBar with different appearances.

razor
@(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)
            .Render())

Radius

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

razor
@(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.

razor
@(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 colour and track colour

We can customize the color of progress and track by using ProgressColor and TrackColor property.

razor
@(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("#2BB20E").TrackThickness(24).ProgressThickness(24).Minimum(0).Maximum(100)
            .Animation(an => an.Enable(true).Delay(0).Duration(2000))
            .Render())