JavaScript/jQuery ProgressBar - Overview

The ProgressBar is a UI component that shows current progress.

View Demo

The following code adds a simple ProgressBar to your page. The value property specifies the current value. The min and max properties limit the range of accepted values. The progress is measured in percentages and calculated by the following formula: (value / max) * 100. If the current progress is unknown yet, set the value property to false.

HTML
JavaScript
  • <div id="progressBarContainer"></div>
  • $(function(){
  • $("#progressBarContainer").dxProgressBar({
  • min: 0,
  • max: 100,
  • value: 49
  • });
  • });

When the ProgressBar reaches the maximum value, the complete event is raised. You can handle it using the onComplete function.

JavaScript
  • $(function() {
  • $("#progressBarContainer").dxProgressBar({
  • min: 0,
  • max: 100,
  • value: 49,
  • onComplete: function() {
  • DevExpress.ui.dialog.alert("Completed");
  • }
  • });
  • });
See Also