DevExtreme Angular - Customize the Loading Indicator
If you need to use a 3rd-party loading indicator inside the LoadPanel, assign its URL to the indicatorSrc option.
jQuery
JavaScript
$(function() { $("#loadPanelContainer").dxLoadPanel({ closeOnOutsideClick: true, indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" }); $("#buttonContainer").dxButton({ text: "Show the Load Panel", onClick: function () { $("#loadPanelContainer").dxLoadPanel("show"); } }); });
Angular
HTML
TypeScript
<dx-load-panel [closeOnOutsideClick]="true" [(visible)]="isLoadPanelVisible" [indicatorSrc]="indicatorUrl"> </dx-load-panel> <dx-button text="Show the Load Panel" (onClick)="isLoadPanelVisible = true"> </dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isLoadPanelVisible: boolean = false; indicatorUrl: string = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"; } @NgModule({ imports: [ // ... DxLoadPanelModule, DxButtonModule ], // ... })
In case you do not need any loading indicator to be shown at all, assign false to the showIndicator option.
jQuery
JavaScript
$(function() { $("#loadPanelContainer").dxLoadPanel({ closeOnOutsideClick: true, showIndicator: false }); $("#buttonContainer").dxButton({ text: "Show the Load Panel", onClick: function () { $("#loadPanelContainer").dxLoadPanel("show"); } }); });
Angular
HTML
TypeScript
<dx-load-panel [closeOnOutsideClick]="true" [(visible)]="isLoadPanelVisible" [showIndicator]="false"> </dx-load-panel> <dx-button text="Show the Load Panel" (onClick)="isLoadPanelVisible = true"> </dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isLoadPanelVisible: boolean = false; } @NgModule({ imports: [ // ... DxLoadPanelModule, DxButtonModule ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.