JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
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.

Dependencies

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 https://github.com/syncfusion/ej2-quickstart.git 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.

[src/system.config.js]

Copied to clipboard
System.config({
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' }
}
});

System.import('app');

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.

[src/index.html]

Copied to clipboard
<!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" />
s<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>
</head>

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

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

[src/app/app.ts]

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

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

// Render initialized ProgressBar
ProgressBar.appendTo('#percentage');

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.

Source
Preview
index.ts
index.html
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,
    },
});
percentageProgress.appendTo('#percentage');
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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</head>

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

</html>
Previous
Next