Getting started with EJ2 TypeScript Progress Bar control

12 Aug 20265 minutes to read

This document explains how to create a simple ProgressBar and configure its features in TypeScript using the Essential JS 2 webpack quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. Ensure that Node.js is installed on your machine. For more information about webpack and its features, refer to the webpack getting-started guide.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

  • Node.js
  • Visual Studio Code (or any text editor)
  • Git for cloning the quickstart repository
  • A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result

Dependencies

Below is the list of dependencies used by the @syncfusion/ej2-progressbar package.

|-- @syncfusion/ej2-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

Quick Setup

Step 1: Open Command Prompt

Open the command prompt and navigate to the directory where you want to create the project.

  • On Windows, use Command Prompt or PowerShell.
  • On macOS or Linux, use Terminal.

Step 2: Clone the Quickstart Repository

Run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 3: Navigate to Project Folder

After cloning the application in the ej2-quickstart folder, run the following command to navigate to the project directory.

cd ej2-quickstart

Step 4: Install Required Packages

Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is already preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install all the dependent npm packages from the command prompt:

npm install

Step 5: Update the HTML Template

Open the ej2-quickstart folder in Visual Studio Code (or any text editor). Locate the ~/src/index.html file, preserve any existing <link> and <script> tags that were generated by the seed, and add an HTML div tag with its id attribute set to element inside the <body> so the ProgressBar has a container to render into:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 ProgressBar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="TypeScript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <!-- existing head content from the seed template remains here -->
</head>

<body>
    <!--container which is going to render the ProgressBar-->
    <div id="element"></div>
</body>

</html>

Step 6: Initialize the ProgressBar Component

Locate the src/app/app.ts file in your project and add the ProgressBar component. The import { ProgressBar } from '@syncfusion/ej2-progressbar' line pulls the ProgressBar class from the package’s TypeScript declaration. The new ProgressBar({...}) call accepts a configuration object — the most common options are:

  • value — Numeric progress value (default null). Interpreted as a percentage between 0 and 100 for both the linear and circular ProgressBar variants.
  • type — ProgressBar variant. Use 'Linear' (default) for a horizontal bar or 'Circular' for a radial indicator.
  • minimum / maximum — Minimum and maximum range of the progress value. Defaults are 0 and 100.
  • height / width — Control height and width in pixels (or CSS units). For a circular ProgressBar, set width to render the SVG canvas size.
  • showProgressValue — When true, displays the numeric value on the bar. Defaults to false.
  • animation — Object that controls the load animation (enable, duration, delay).

Finally, progressBar.appendTo('#element') renders the component into the <div id="element"> element declared in index.html.

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

// Initialize ProgressBar component
let progressBar: ProgressBar = new ProgressBar({
    value: 40
});

// Render initialized ProgressBar
progressBar.appendTo('#element');

Step 7: Run the Application

Open the integrated terminal in Visual Studio Code or use your command prompt to run the application. Use the npm run start command:

npm run start

The application will compile and automatically start in your default web browser. The application typically runs at http://localhost:4000. You should see the Syncfusion® ProgressBar control displayed on the page. To stop the dev server, press Ctrl+C in the terminal.

Output

The following screenshot shows the output of the Syncfusion ProgressBar quick start application.

Syncfusion ProgressBar Quick Start Output

Troubleshooting

  • Blank page, no ProgressBar — The npm package failed to load. Verify the network tab and that npm install finished successfully.
  • Cannot find module '@syncfusion/ej2-progressbar' — Dependencies were not installed. Re-run npm install.
  • ProgressBar is undefined — The import line is missing or the package version is mismatched. Confirm import { ProgressBar } from '@syncfusion/ej2-progressbar'; is at the top of app.ts.