HelpBot Assistant

How can I help you?

Getting started with EJ2 JavaScript ProgressBar control

19 Feb 20265 minutes to read

This section explains the steps required to create a simple ProgressBar and demonstrate the basic usage of the ProgressBar control.

Dependencies

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

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

Set up for local environment

Refer to the following steps to set up your local environment.

Step 1: Create a root folder myapp for your application.

Step 2: Create myapp/resources folder to store local scripts and styles files.

Step 3: Create myapp/index.js and myapp/index.html files for initializing Essential® JS 2 ProgressBar control.

Adding Syncfusion® resources

The Essential® JS 2 Progress Bar control can be initialized by using either of the following ways.

  • Using local script.
  • Using CDN link for script.

Using local script

You can get the global scripts and styles from the installed location of Essential Studio® JavaScript (Essential® JS 2).

After installing the product, copy the ProgressBar and its dependency scripts and style files into the resources/scripts and resources/styles folders.

Refer to the following paths to locate the ProgressBar script and style files.

Syntax:

Dependency script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Dependency script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-svg-base/dist/global/ej2-svg-base.min.js

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-progressbar/dist/global/ej2-progressbar.min.js

After copying the files, reference the ProgressBar scripts in the index.html file. The HTML below shows a minimal setup using the bundled script:

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
     <head>
       <title>Essential JS 2 ProgressBar</title>
       <!-- Essential JS 2 ProgressBar's dependent scripts -->
       <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
       <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
       <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
       <!-- Essential JS 2 ProgressBar's global script -->
       <script src="resources/scripts/ej2-progressbar.min.js" type="text/javascript"></script>
     </head>
     <body>
     </body>
  </html>

Using CDN link, you can directly refer the ProgressBar control’s script into the index.html.

Refer the ProgressBar’s CDN links as below

Syntax:

Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-progressbar/dist/global/ej2-progressbar.min.js

The below html code example shows the minimal dependency of ProgressBar.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 ProgressBar</title>
            <!-- Essential JS 2 ProgressBar's dependent global scripts -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
            <!-- Essential JS 2 ProgressBar global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-progressbar/dist/global/ej2-progressbar.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Adding ProgressBar control

Now, you can start adding the ProgressBar control in the application. For getting started, add a div element for the ProgressBar control in index.html. Then reference the index.js file in the index.html file.

In this document context we are going to use ej2.min.js which includes all the Essential® JS 2 components and its dependent scripts.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 ProgressBar</title>
            <!-- Essential JS 2 all script -->
            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
       </head>
       <body>
           <!-- Add the HTML <div> element for ProgressBar  -->
             <div id="element"></div>
             <script src="index.js" type="text/javascript"></script>
       </body>
  </html>

Place the following Progress Bar code in the index.js

  var percentageProgress = new ej.progressbar.ProgressBar({
      value: 40});
  percentageProgress.appendTo('#element');