Customization

17 Apr 20232 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

Customize the thickness of the track using trackThickness, progress using progressThickness and secondary progress using secondaryProgressThickness to render the progress bar 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" secondaryProgressThickness="20">
                <e-progressbar-labelstyle color="#FFFFFF"></e-progressbar-labelstyle>
                <e-progressbar-animation enable=true duration=2000 delay=0></e-progressbar-animation>
</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 color and track color

Customize the color of progress, secondary progress, and track by using the progressColor, secondaryProgressColor and trackColor properties.

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 secondaryProgress=60 secondaryProgressColor="green" textRender="textRender">
        <e-progressbar-labelstyle color="#FFFFFF"></e-progressbar-labelstyle>
        <e-progressbar-animation enable=true duration=2000 delay=0></e-progressbar-animation>
</ejs-progressbar>

var textRender = function (args) {
        args.text = '50';
}