DevExtreme Angular - 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.
- <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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.