A widget used to indicate whether or not an element is loading.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxLoadPanel widget represents an overlaying element indicating that loading is in progress.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxLoadPanel widget using the Knockout approach.

<div data-bind="dxLoadPanel: { message: 'Loading...', visible: loadPanelVisible }"></div>

The text displayed by the widget is specified via the message configuration option.

Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

var loadPanelVisible = ko.observable(false);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxList widget is related to the Overlays category. So read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Overlays article.
Show Example:


An object that defines configuration options for the dxLoadPanel widget.


This section describes members used to manipulate the widget.


This section describes events fired by this component.