Types

17 Feb 20224 minutes 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.

CSHTML

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

CSHTML

@(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())