Search results

Getting started with JavaScript ProgressBar control

06 Jun 2023 / 3 minutes to read

This section explains the steps required to create the ProgressBar control using TypeScript and configure its properties using Essential JS 2 quickstart  seed repository.


The following list of dependencies are required to use the ProgressBar control in your application:

Copied to clipboard
|-- @syncfusion/ej2-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data: "*"
    |-- @syncfusion/ej2-svg-base

Set up your development environment

  • Clone the Essential JS 2 quickstart application project from GitHub, and install the necessary npm packages using the following command.
Copied to clipboard
git clone quickstart
cd quickstart
npm install

By default, the project is configured with all the Essential JS 2 dependencies. For better understanding, remove all the dependencies from src/system.config.js to get started with the ProgressBar component.


Copied to clipboard
paths: {
    'syncfusion:': './node_modules/@syncfusion/',
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-progressbar ": "syncfusion:ej2-progressbar /dist/ej2-progressbar .umd.min.js",
    "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
packages: {
    'app': { main: 'app', defaultExtension: 'js' }


Add Progress Bar to the Application

  • Add an HTML div tag with its id attribute as element in your index.html file to initialize the ProgressBar control.


Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<title>Essential JS 2 ProgressBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
s<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="" rel="stylesheet" />
<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>

<!--element which is going to render-->
<div id="element"></div>

  • Import the Progress Bar control to your app.ts file to instantiate a Progress Bar and append the instance to the #element as shown.


Copied to clipboard
import { ProgressBar } from '@syncfusion/ej2-progressbar ';

// Initialize ProgressBar component
let ProgressBar: ProgressBar = new ProgressBar({
  value: 40

// Render initialized ProgressBar

Run the application

  • Run the application in the browser using the following command.
Copied to clipboard
npm start

Output will be as follows:

In the example, the #element is the id of the HTML element in a page to which the Progress Bar is initialized.

Copied to clipboard
import { ProgressBar } from '@syncfusion/ej2-progressbar';

let percentageProgress: ProgressBar = new ProgressBar({
    type: 'Linear',
    height: '60',
    value: 40,
    animation: {
        enable: true,
        duration: 2000,
        delay: 0,
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="row linear-parent">
            <div id="percentage"></div>