Types

17 Feb 20221 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.

CSHTML

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

CSHTML

<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>