Theme in EJ2 TypeScript Progressbar control

10 May 20232 minutes 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
import { ProgressBar } from '@syncfusion/ej2-progressbar';

let linearThemeProgress: ProgressBar = new 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');

let circularThemeProgress: ProgressBar = new ProgressBar({
  type: 'Circular',
  height: '150',
  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="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="linearTheme" class="linear-progress"></div>
            <div id="circularTheme" class="linear-progress"></div>
        </div>
    </div>
</body>

</html>