Types in ASP.NET Core Progress Bar

14 Sep 20262 minutes to read

Change the type of the Progress Bar by setting the type attribute on the <ejs-progressbar> tag helper. The default is Linear; the supported values are Linear and Circular.

<ejs-progressbar id="container" type='Linear' height='60' minimum="0" maximum="100"
                value=40 secondaryProgress='60'>
</ejs-progressbar>

ASP.NET Core Progress Bar Control

View Sample in GitHub.

Linear

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

<ejs-progressbar id="lineardeterminate" type='Linear' height='60' minimum="0" maximum="100"
        value=100>
</ejs-progressbar>
<ejs-progressbar id="linearindeterminate" type='Linear' height='60' minimum="0" maximum="100"
        value=20 isIndeterminate="true">
</ejs-progressbar>
<ejs-progressbar id="linearbuffer" type='Linear' height='60' minimum="0" maximum="100"
        value=40 secondaryProgress='60'>
</ejs-progressbar>
<ejs-progressbar id="linearsegment" type='Linear' height='60' minimum="0" maximum="100"
        value=100 segmentCount="8">
</ejs-progressbar>

Circular

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

<ejs-progressbar id="circulardeterminate" type='Circular' height='60' minimum="0" maximum="100"
            value=100>
</ejs-progressbar>
<ejs-progressbar id="circularindeterminate" type='Circular' height='60' minimum="0" maximum="100"
            value=20 isIndeterminate="true">
</ejs-progressbar>
<ejs-progressbar id="circularbuffer" type='Circular' height='60' minimum="0" maximum="100"
            value=40 secondaryProgress='60'>
</ejs-progressbar>
<ejs-progressbar id="circularsegment" type='Circular' height='60' minimum="0" maximum="100"
            value=100 segmentCount="8">
</ejs-progressbar>