loading...
Cover image for Show Dynamic Statuses with the New Progress Bar in Essential JS 2
Syncfusion, Inc.

Show Dynamic Statuses with the New Progress Bar in Essential JS 2

sureshmohan profile image Suresh Mohan Originally published at syncfusion.com on ・5 min read

To add colorful animation effects to your progress indicator, you need a groundbreaking progress bar! In this aspect, our new Progress Bar control for the Essential JS 2 suite fulfills your need. This control is available with the 2020 Volume 1 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.

Progress Bar—Essential JS 2

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

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

Segments

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

Segmented Progress Bar
Segmented Progress Bar

Angle

This feature allows you to customize the start and sweep angles of a circular progress bar to give a unique style to it.

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

Multiple ranges

This feature allows you to visualize the progress of a task with multiple color ranges. Multiple ranges in progress bar

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 and configure the necessary packages in the *config.js * file.
"@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"
  1. Install the NPM packages using the following command.
npm install
  1. Add the HTML input element that needs to be initialized as a component in the index.html file.
  2. Initialize the component in the *ts * file as shown in the following code.
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">
  1. You can change the value of the progress bar dynamically as shown in the following code.
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 for the Essential JS 2 suites. This control is available with the 2020 Volume 1 release. We look forward to you trying it out. You can install and download the Essential JS 2 components from our website. Also, you can check out the source code for the Progress Bar in this GitHub location. Please take a look at our live demos in our sample browser.

The JavaScript Progress bar component is also available in the React, Angular, Vue, Blazor, and MVC 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, Direct-Trac, or feedback portal.

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

The post Show Dynamic Statuses with the New Progress Bar in Essential JS 2 appeared first on Syncfusion Blogs.

Posted on by:

sureshmohan profile

Suresh Mohan

@sureshmohan

Suresh is a Product Manager at Syncfusion and a technology enthusiast. He helps people follow best practices in coding and in using Syncfusion controls in their applications.

Syncfusion, Inc.

Syncfusion provides third-party UI components for React, Vue, Angular, JavaScript, Blazor, ASP.NET Web Forms, MVC, Core, WinForms, WPF, UWP and Xamarin.

Discussion

pic
Editor guide