Customization in JavaScript (ES5) ProgressBar control

08 May 2023 / 3 minutes to read

Segments

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

Source

Preview

index.js

index.html

var linearProgress1 = new ej.progressbar.ProgressBar({
    type: 'Circular',
        height: '60',
        segmentCount: 8,
        value: 100,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
  });
  linearProgress1.appendTo('#percentage');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source

Preview

index.js

index.html

var linearProgress1 = new ej.progressbar.ProgressBar({
    type: 'Linear',
        height: '60',
        width: '90%',
        trackThickness: 24,
        progressThickness: 24,
        secondaryProgressThickness: 20,
        value: 100,
        showProgressValue: true,
        labelStyle: {
            color: '#FFFFFF'
        },
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        }
    });
    linearProgress1.appendTo('#percentage');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Radius

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

Source

Preview

index.js

index.html

var linearProgress1 = new ej.progressbar.ProgressBar({
  type: "Circular",
  value: 60,
  width: "160px",
  height: "160px",
  enableRtl: false,
  trackColor: "#FFD939",
  radius: "100%",
  progressColor: "white",
  trackThickness: 80,
  cornerRadius: "Round",
  progressThickness: 10,
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  }
  });
  linearProgress1.appendTo('#percentage');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

InnerRadius

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

Source

Preview

index.js

index.html

var linearProgress1 = new ej.progressbar.ProgressBar({
  type: 'Circular',
        value: 60,
        width: '160px',
        height: '160px',
        enableRtl: false,
        trackColor :'#FFD939',
        radius: '100%',
        innerRadius: '80%',
        progressColor: 'white',
        trackThickness: 80,
        cornerRadius: 'Round',
        progressThickness: 10,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
  });
  linearProgress1.appendTo('#percentage');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Progress color and track color

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

Source

Preview

index.js

index.html

var linearProgress1 = new ej.progressbar.ProgressBar({
  type: 'Linear',
        height: '60',
        width: '90%',
        trackThickness: 24,
        progressThickness: 24,
        cornerRadius: 'Round',
        progressColor: '#E3165B',
        trackColor: '#F8C7D8',
        secondaryProgressColor: 'green',
        secondaryProgress: 70,
        value: 50,
        showProgressValue: true,
        labelStyle: {
            color: '#FFFFFF'
        },
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
        textRender: (args) => {
            args.text = '50';
        }
  });
  linearProgress1.appendTo('#percentage');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Contents

Segments
Thickness
Radius
InnerRadius
Progress color and track color

Contents

Segments
Thickness
Radius
InnerRadius
Progress color and track color