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