How to Use a jQuery Progress Bar UI Component in Your Web App

Progress bars are vital components in many modern apps. Learn about the various use cases of progress bars and how to make them for your apps with Kendo UI.

A progress bar is used to show the length of a process. Anytime the end user is required to wait for an action to complete, like a page loading, you should communicate to them where they are in the process. A visual like a progress bar provides a distraction so that the perceived wait time is shorter. A progress bar can also be used to show values other than process length like the amount of health a player has in a game.

In this blog, we will review the `ProgressBar` component. You'll learn how to create different types of progress bars using the Kendo UI `ProgressBar` and the various use cases for each.

Value Progress Bar 

A progress bar has two parts: a track and an indicator. The track represents the maximum value of the process, while the indicator is the current value of the bar. A Kendo UI `ProgressBar` of type `value` displays the progress status as a number inside the track. This is the default progress bar when the `type` parameter is not defined in the component. The `value` parameter determines the length of the indicator. If the `min` and `max` options have not been set, the minimum value of the progress bar will be 0 and the maximum value will be 100. When the `min` and `max` options have been specified, the value will be reflected on the progress bar as a proportion of the maximum value. This is an example of a default progress bar:

Percent Progress Bar 

A percentage-based progress bar behaves similarly to a value type progress bar except the progress status text is displayed as a percentage. This kind of progress is ideal when you are able to calculate the length of the process and update the progress until it finishes.

For example, a percent progress bar can be used to show the percentage of content that has been downloaded or the percentage a video that has been loaded. You may want to also use the progress to show statistics like the results of a poll. This is an example of a percent progress bar at 25%:

If no `min` and `max` are specified, the value will be interpreted as a percentage from 0 to 100. If there is a `min` and `max`, the percent will be calculated by dividing the value by the maximum value. For example, if the `value` is 5, the `min` is 0, and the `max` is 20 the progress bar will show 25%. If the `min` is not 0, then the difference between the `min` and `max` will be used to calculate the percentage.

Chunk Progress Bar

A chunk progress bar is divided into sections or chunks. This can be used when you want to indicate the length of a process by the number of steps it takes to complete.

An example use case is when users are submitting a multi-part form. In a checkout form, one step can be entering shipping info, another step entering payment info and the last step can be reviewing the order before it is submitted. This is an example of a progress bar that has two out of three sections filled in:

The `chunkCount` along with the `min` and `max` options must be set to display the value in the progress bar.  The `chunkCount` is the number of sections in the progress. The `max` here should correspond to the `chunkCount`. If the `chunkCount` is equal to 5, then the min should be 0 and the max should be 5. The value of the progress bar can be anything from 0-5, where 0 means there are no sections filled in and 5 means the bar is completely filled.

Indeterminate Progress Bar 

A progress bar can either be determinate or indeterminate. A determinate progress bar has a specified process length. All of the progress bar types we have discussed so far have been determinate. An indeterminate progress bar has an unspecified length. It is used when the process length is unknown or its exact value isn’t important to show. In this state, the indicator will display a continuously running animation that travels the length of the track. To create an indeterminate progress bar you set the `value` property to `false`.

Specifying a `type`, `min` or `max` is not necessary to initialize this kind of progress bar. However, you may want to initialize your progress with these values if you expect to switch from an indeterminate to a determinate state. To do this you can set the value of the progress using the value method. This example shows the progress set to 75% immediately after it has been created:

var progress = $('#progress').kendoProgressBar({

  value: false,

  type: 'percent'

}).data('kendoProgressBar');

progress.value(75);

Conclusion

In this lesson, you learned how to create a value progress bar, a percent progress bar and a chunk progress bar. You also saw an example of an indeterminate progress bar which has no value.

In addition to the features described, the Kendo UI `ProgressBar` provides other options to customize the appearance of the component. The style of the indicator can be changed using the progressWrapper field. You can change the position of the text in the progress bar or hide it altogether with the `reverse` and `showStatus` options respectively. If you want to change what the text says, you can use the progressStatus field.

In the next episode, you will take a look at the `Slider` component. A slider lets you make a selection from a range of values.

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and Vue Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.

Resources

• API Reference
• Demos
• Kendo UI Web Font Icons
• More Kendo UI components
• Getting Started with Kendo UI Stylesheets
• Kendo UI Online Editor