ProgressBar

The ProgressBar is a widget that shows current progress.

Included in: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js

Module: ui/progress_bar

Export: default

$("#progressbar").dxProgressBar({

});

You can create the widget using one of the following approaches.

jQuery

JavaScript

HTML

$(function () {
    $("#progressBar").dxProgressBar({
        min: 0,
        max: 100,
        value: 49
    });
});

<div id="progressBar"></div>

Angular

HTML

<dx-progress-bar
    [min]="0"
    [max]="100"
    [value]="49">
</dx-progress-bar>

AngularJS

HTML

<div dx-progress-bar="{
    min: 0,
    max: 100,
    value: 49
}"></div>

Knockout

HTML

<div data-bind="dxProgressBar: {
    min: 0,
    max: 100,
    value: 49
}"></div>

ASP.NET MVC Controls

Razor C#

Razor VB

@(Html.DevExtreme().ProgressBar()
    .ID("progressBar")
    .Min(0)
    .Max(100)
    .Value(49)
)

@(Html.DevExtreme().ProgressBar() _
    .ID("progressBar") _
    .Min(0) _
    .Max(100) _
    .Value(49)
)

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

View Demo