Theme in JavaScript (ES5) ProgressBar control

08 May 2023 / 1 minute to read

To enhance the visualization of the Progress Bar, use different themes that are mapped to the theme property. The following themes are available in the Progress Bar.

Material
Fabric
Bootstrap
Bootstrap 4
High Contrast
Tailwind

Source

Preview

index.js

index.html

var linearThemeProgress = new ej.progressbar.ProgressBar({
  type: 'Linear',
  height: '60',
  width: '100%',
  value: 40,
  secondaryProgress: 60,
  trackThickness: 20,
  progressThickness: 20,
  theme: 'HighContrast',
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  }
});

linearThemeProgress.appendTo('#linearTheme');

var circularThemeProgress = new ej.progressbar.ProgressBar({
  type: 'Circular',
  height: '160',
  width: '100%',
  value: 40,
  secondaryProgress: 60,
  trackThickness: 20,
  progressThickness: 20,
  theme: 'HighContrast',
  animation: {
    enable: true,
    duration: 2000,
    delay: 0
  }
});

circularThemeProgress.appendTo('#circularTheme');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Progress Bar</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="linearTheme" class="linear-progress"></div>
            <div id="circularTheme" 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>