DevExtreme jQuery/JS - Indicate the Loading State
While the content of the DeferRendering widget is getting ready, the widget can display a loading indicator. It is disabled by default, so assign true to the showLoadIndicator if you need to enable it.
HTML
<div data-options="dxView: { name: 'Products', title: 'Products' }">
<div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
showLoadIndicator: true,
renderWhen: isReady
}">
<!-- Widget content -->
</div>
</div>If you want to display custom content instead of the loading indicator, use the following CSS classes.
dx-visible-while-pending-rendering
All elements with this class will be displayed while the main content is getting ready.dx-invisible-while-pending-rendering
All elements with this class are the main content.
HTML
<div data-options="dxView: { name: 'Products', title: 'Products' }">
<div data-options="dxContent: { targetPlaceholder: 'content' }" data-bind="dxDeferRendering: {
showLoadIndicator: true,
renderWhen: isReady
}">
<div class="dx-visible-while-pending-rendering">
<!-- Displayed while the main content is getting ready -->
</div>
<div class="dx-invisible-while-pending-rendering">
<!-- The main content -->
</div>
</div>
</div>See Also
Select one or more answers