Search results

Types in JavaScript (ES5) ProgressBar control

08 Dec 2022 / 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
Copied to clipboard
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');
Copied to clipboard
<!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.3.56/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/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
Copied to clipboard
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');
Copied to clipboard
<!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.3.56/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/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
Contents