Show Dynamic Statuses with the New Progress Bar in Essential JS 2
Tags: webdev, javascript, angular, react
Published: 2020-04-23 04:45:59

---
title: Show Dynamic Statuses with the New Progress Bar in Essential JS 2
published: true
date: 2020-04-21 10:00:50 UTC
tags: webdev, javascript, angular, react
canonical_url: https://www.syncfusion.com/blogs/post/show-dynamic-statuses-with-the-new-progress-bar-in-essential-js-2.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hq9nw4cxgaqvzrn5fyoq.jpg
---

To add colorful animation effects to your progress indicator, you need a groundbreaking progress bar! In this aspect, our new [Progress Bar control](https://www.syncfusion.com/javascript-ui-controls/js-progressbar) for the [Essential JS 2 suite](https://www.syncfusion.com/javascript-ui-controls/) fulfills your need. This control is available with the [2020 Volume 1](https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download) release. It comes with the following functionalities:

- Determinate and indeterminate states
- Buffering
- Segmented progress
- Animation
- Custom content
- Right-to-left rendering
- Built-in themes
- Adaptability

The Progress Bar control can be used to visualize the changing status of an extended operation such as a download, file transfer, or installation. All progress bar elements are rendered using scalable vector graphics (SVG) to ensure the quality of the visual experience.

![](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Progress-Bar%E2%80%94Essential-JS-2.png)<figcaption>Progress Bar—Essential JS 2</figcaption>

This blog will provide a walk-through on the Progress Bar control and its features.

## Types

Progress Bar supports different shapes (rectangle, circle, and semi-circle) to give a unique design to the work progress visualization. ![Types of Progress Bar—Essential JS 2](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Types-of-Progress-Bar%E2%80%94Essential-JS-2.png)

## States

This feature allows you to visualize the changing status of an operation in different modes.

**Determinate:** Use this when the time of completion of a progression can be estimated.

**Indeterminate:** Use this when the time of completion of a progression can’t be estimated or calculated.

**Buffer:** Use this for co-related tasks.  It supports secondary progress, where the primary task depends on the secondary task.

**![States of Progress Bar—Essential JS 2](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/States-of-Progress-Bar%E2%80%94Essential-JS-2.png)**

## Segments

This feature allows you to divide a progress bar into multiple segments to visualize the progress of multi-sequence tasks.

![Segmented Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Segmented-Progress-Bar.png)<figcaption>Segmented Progress Bar</figcaption>

## Angle

This feature allows you to customize the start and sweep angles of a circular progress bar to give a unique style to it. ![](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Different-angles-in-progress-bar.png)

## Custom content

This feature allows you to add any custom content at the center of the circular progress bar to indicate the completion of progress or to add any custom text that conveys the current status of the progress. ![Custom content in progress bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Custom-content-in-progress-bar.png)

## Multiple ranges

This feature allows you to visualize the progress of a task with multiple color ranges. ![Multiple ranges in progress bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Multiple-ranges-in-progress-bar.png)

## Themes

Configure the look and feel of a progress bar using several built-in options to match with the application. The control supports the following themes:

- Fabric
- Material
- High contrast
- Bootstrap

## Getting started with the Progress Bar in TypeScript

Let’s create a progress bar to give an attractive look to visualize measures. Follow these steps to configure the Progress Bar in TypeScript.

1. Clone the [Essential JS 2 quick-start seed repository](https://github.com/syncfusion/ej2-quickstart) and configure the necessary packages in the  **config.js ** file.
```js
"@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"
```
2. Install the NPM packages using the following command.
```cmd
npm install
```
3. Add the HTML input element that needs to be initialized as a component in the  **index.html**  file.
4. Initialize the component in the  **ts ** file as shown in the following code.
```js
import { ProgressBar } from '@syncfusion/ej2-progressbar;
  
// initialize progress bar component
let linear: ProgressBar = new ProgressBar (
{
  
     type: 'linear',
     value: 50, 
}
);
  
// render initialized progress bar.
linear.appendTo('#container');
<img class="aligncenter size-full wp-image-57262" src="https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Initialized-progress-bar.png" alt="Initialized progress bar" srcset="https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Initialized-progress-bar.png 745w, https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Initialized-progress-bar-300x50.png 300w" sizes="(max-width: 745px) 100vw, 745px" width="745" height="124">
```
5. You can change the value of the progress bar dynamically as shown in the following code.
```js
linear.value = 70;
linear.dataBind();
<img class="aligncenter size-full wp-image-57263" src="https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Updating-values-in-Progress-bar.png" alt="" srcset="https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Updating-values-in-Progress-bar.png 743w, https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Updating-values-in-Progress-bar-300x29.png 300w" sizes="(max-width: 743px) 100vw, 743px" width="743" height="73">
```

## Conclusion

I hope you now have a clear idea of the new, user-friendly [Progress Bar control](https://www.syncfusion.com/javascript-ui-controls/js-progressbar) for the [Essential JS 2 suite](https://www.syncfusion.com/javascript-ui-controls/)s. This control is available with the [2020 Volume 1](https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download) release. We look forward to you trying it out. You can install and download the Essential JS 2 components from [our website](https://www.syncfusion.com/downloads/essential-js2). Also, you can check out the source code for the Progress Bar in this [GitHub](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/progressbar)<u> location</u>. Please take a look at our live demos in our [sample browser](https://ej2.syncfusion.com/demos/#/material/progress-bar/linear.html).

The JavaScript Progress bar component is also available in the [React](https://ej2.syncfusion.com/react/demos/#/material/progress-bar/linear), [Angular](https://ej2.syncfusion.com/angular/demos/#/material/progress-bar/Linear), [Vue](https://ej2.syncfusion.com/beta/vue/demos/#/material/progress-bar/linear.html),  [Blazor](https://blazor.syncfusion.com/demos/progress-bar/linear/), and [MVC](https://ej2.syncfusion.com/aspnetmvc/ProgressBar/Linear#/material) frameworks, built from their own TypeScript libraries.

If you wish to send us feedback or would like to ask any questions, please feel free to post in the comments section below, or contact us through our [support forum](https://www.syncfusion.com/forums)<u>,</u> [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/).

_If you liked this blog post, we think you’ll also like the following free ebooks:_

- [_JavaScript Succinctly_](https://www.syncfusion.com/ebooks/javascript)
- [_TypeScript Succinctly_](https://www.syncfusion.com/ebooks/typescript)
- [_AngularJS Succinctly_](https://www.syncfusion.com/ebooks/angularjs)
- [_Angular 2 Succinctly_](https://www.syncfusion.com/ebooks/angular2_succinctly)

The post [Show Dynamic Statuses with the New Progress Bar in Essential JS 2](https://www.syncfusion.com/blogs/post/show-dynamic-statuses-with-the-new-progress-bar-in-essential-js-2.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).