DevExtreme React - 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.
jQuery
HTML
JavaScript
<div id="loadIndicatorContainer"></div>
$(function() { $("#loadIndicatorContainer").dxLoadIndicator({ visible: true, height: 40, width: 40 }); });
Angular
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.
jQuery
JavaScript
$(function() { $("#loadIndicatorContainer").dxLoadIndicator({ visible: true, indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" }); });
Angular
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.