DevExtreme Angular - Overview
The LoadIndicator is a UI element notifying the viewer that a process is in progress.
The following code adds a simple LoadIndicator to your page. You can change the widget size, using the height and width options.
HTML
TypeScript
- <dx-load-indicator
- [(visible)]="isLoadIndicatorVisible"
- [height]="40"
- [width]="40">
- </dx-load-indicator>
- import { DxLoadIndicatorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- isLoadIndicatorVisible: boolean = true;
- }
- @NgModule({
- imports: [
- // ...
- DxLoadIndicatorModule
- ],
- // ...
- })
If you need to use a custom image in the LoadIndicator, assign its URL to the indicatorSrc option.
HTML
TypeScript
- <dx-load-indicator
- [(visible)]="isLoadIndicatorVisible"
- [indicatorSrc]="indicatorUrl">
- </dx-load-indicator>
- import { DxLoadIndicatorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- isLoadIndicatorVisible: boolean = true;
- indicatorUrl: string = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg";
- }
- @NgModule({
- imports: [
- // ...
- DxLoadIndicatorModule
- ],
- // ...
- })
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.