ProgressBar Overview

The Kendo UI ProgressBar widget offers rich functionalities for displaying and tracking the progress of a task. It supports multiple types, horizontal and vertical orientation, and also different directions.


Kendo UI ProgressBar supports three different types:

  • value - this is a regular ProgressBar which displays the progress status as an absolute value.
  • percent - a regular ProgressBar that displays the progress status in percentage.
  • chunk - a ProgressBar divided in chunks, in this way displaying the progress status in steps.

Getting Started

Create the ProgressBar

Create the ProgressBar by using a <div> element as demonstrated in the example below.

<div id="progressbar"></div>

Initialize the ProgressBar

Initialize the ProgressBar by using a jQuery selector as shown in the example below.


Initialize a chunk ProgressBar

Initialize a chunk ProgressBar in the way displayed in the example below.

<div id="progressbar"></div>
    type: "chunk",
    chunkCount: 10



Many of the options delivered by the ProgressBar can be configured through its properties, which include:

  • Horizontal or vertical orientation
  • Reversed direction
  • Minimum and maximum value
  • Animation duration

The example below demonstrates how to configure the properties of the ProgressBar.

  min: 100,
  max: 500,
  value: 100,
  type: "percent",
  orientation: "vertical",
  reverse: true,
  complete: function(e) {
    console.log("Progress completed");
  animation: {
    duration: 600


Set a 100% Width and Auto-Resize

By default, the ProgressBar is a 27em wide inline-block element. The easiest cross-browser technique to make it expand and resize automatically is to apply a couple of CSS styles to the originating element.

The example below demonstrates how to make the ProgressBar 100% wide and automatically resizeable.


    width: auto;
    display: block;


<div id="progressbar"></div>




ProgressBar API


Kendo UI ProgressBar supports the following events:

  • change - the event us fired each time a new value is set.
  • complete - fired when progress is completed, i.e. each time it reaches the maximum value.

There are two ways to handle events:

  • Specify the JavaScript function which will handle the event during the initialization of the widget.
  • Use the bind method of the widget after initialization.

For examples demonstrating these two approaches, refer to the ProgressBar API reference.


Existing Instances

Make a reference to an existing ProgressBar instance via Once done, use the ProgressBar API to control its behavior.

The example below demonstrates how to access an existing ProgressBar instance.

var progressbar = $("#progressbar").data("kendoProgressBar");

See Also

In this article
Not finding the help you need? Improve this article