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.
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.
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.