Search results

Types in ASP.NET MVC ProgressBar control

22 Oct 2021 / 1 minute to read

Visualize progress in different shapes (rectangle, circle, and semi-circle) to give a unique appearance to your app design.

Linear

Set Type to Linear to get the linear progress bar. It also support secondary progress and different mode of progress.

razor
Copied to clipboard
@Html.EJS().ProgressBar("lineardeterminate")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear).Value(100)
                        .Height("60")
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("linearindeterminate")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear).Value(20)
                        .Height("60").IsIndeterminate(true)
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("linearbuffer")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear).Value(40)
                        .Height("60").SecondaryProgress(60)
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("linearsegment")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear).Value(100)
                        .Height("60").SegmentCount(8)
                        .Minimum(0).Maximum(100)
                        .Render())

Circular

Set Type to Circular to get the circular progress bar. It also support secondary progress and different mode of progress.

razor
Copied to clipboard
@Html.EJS().ProgressBar("Circulardeterminate")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(100)
                        .Height("60")
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("Circularindeterminate")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(20)
                        .Height("60").IsIndeterminate(true)
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("Circularbuffer")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(40)
                        .Height("60").SecondaryProgress(60)
                        .Minimum(0).Maximum(100)
                        .Render())
@Html.EJS().ProgressBar("Circularsegment")
                        .Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(100)
                        .Height("60").SegmentCount(8)
                        .Minimum(0).Maximum(100)
                        .Render())
Contents
Contents