Search results

Types in ASP.NET Core ProgressBar control

22 Jul 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.

tagHelper
Copied to clipboard
<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.

tagHelper
Copied to clipboard
<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>
Contents
Contents