Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (27)Blazor  (49)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (53)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (400)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (234)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (140)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (17)UI  (62)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (99)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Showcase Dynamic Status with the New Progress Bar in Essential JS2

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

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"
    
  2. Install the NPM packages using the following command.
    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.
    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');
    Initialized progress bar
  5. You can change the value of the progress bar dynamically as shown in the following code.
    linear.value = 70;
    linear.dataBind();
    

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 ReactAngularVue,  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:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top