Customization

1 Mar 20222 minutes to read

Segments

We can divide a progress bar into multiple segments using a segmentCount to visualize the progress of multiple sequential tasks.

CSHTML

<ejs-progressbar id="container" type='Circular' height='60' minimum="0" maximum="100"
                value=100 segmentCount="8">
</ejs-progressbar>

Thickness

You can customize the thickness of the track using trackThickness and progress using progressThickness to render the ProgressBar with different appearances.

CSHTML

<ejs-progressbar id="container" minimum="0" maximum="100" type='Linear' value=100
                  width='90%' height='60' trackThickness=24 progressThickness=24 showProgressValue="true">
</ejs-progressbar>

Radius

The radius of the progress bar can be customized using radius property and corner can be customized by cornerRadius property.

CSHTML

<ejs-progressbar id="container" minimum="0" maximum="100" enableRtl="false" type='Circular' value=60 
        radius="100%" trackColor="#FFD939" progressColor="white" 
        trackThickness=80 cornerRadius="Round" progressThickness=10>
</ejs-progressbar>

InnerRadius

The inner radius of the progress bar can be customized using innerRadius property.

CSHTML

<ejs-progressbar id="container" minimum="0" maximum="100" enableRtl="false" type='Circular' value=60 
        radius="100%" width='160px' height='160px' innerRadius="190%" trackColor="#FFD939" progressColor="white" 
        trackThickness=80 cornerRadius="Round" progressThickness=10>
</ejs-progressbar>

Progress colour and track colour

We can customize the color of progress and track by using progressColor and trackColor property.

CSHTML

<ejs-progressbar id="container" minimum="0" maximum="100" enableRtl="false" type='Linear'
        value=50 width='90%' height='60' trackColor="#F8C7D8" progressColor="#E3165B"
        showProgressValue="true" trackThickness=24 cornerRadius="Round" progressThickness=24>
</ejs-progressbar>