Types in JavaScript (ES5) ProgressBar control

02 Feb 2023 / 2 minutes 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.

Source

Preview

index.js

index.html

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

  var linearProgress2 = new ej.progressbar.ProgressBar({
    type: 'Linear',
    height: '60',
    isIndeterminate: true,
    value: 20,
    animation: {
        enable: true,
        duration: 2000,
        delay: 0,
    },
  });
  linearProgress2.appendTo('#linearindeterminate');

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

  var linearProgress4 = new ej.progressbar.ProgressBar({
    type: 'Linear',
        height: '60',
        value: 40,
        secondaryProgress: 60,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
  });
  linearProgress4.appendTo('#linearbuffer');

<!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="//cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="lineardeterminate" class="linear-progress"></div>
            <div id="linearindeterminate" class="linear-progress"></div>
            <div id="linearbuffer" class="linear-progress"></div>  
            <div id="linearsegment" class="linear-progress"></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>

Circular

Set type to Circular to get the circular progress bar. It also support secondary progress and different mode of progress.

Source

Preview

index.js

index.html

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

  var linearProgress2 = new ej.progressbar.ProgressBar({
    type: 'Circular',
    height: '60',
    isIndeterminate: true,
    value: 20,
    animation: {
        enable: true,
        duration: 2000,
        delay: 0,
    },
  });
  linearProgress2.appendTo('#linearindeterminate');

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

  var linearProgress4 = new ej.progressbar.ProgressBar({
    type: 'Circular',
        height: '60',
        value: 40,
        secondaryProgress: 60,
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        },
  });
  linearProgress4.appendTo('#linearbuffer');

<!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="//cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="lineardeterminate" class="linear-progress"></div>
            <div id="linearindeterminate" class="linear-progress"></div>
            <div id="linearbuffer" class="linear-progress"></div>  
            <div id="linearsegment" class="linear-progress"></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

Linear
Circular

Contents

Linear
Circular