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 UI component size, using the height and width properties.
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
],
// ...
})Vue
<template>
<DxLoadIndicator
v-model:visible="isLoadIndicatorVisible"
:height="40"
:width="40"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
export default {
components: {
DxLoadIndicator
},
data() {
return {
isLoadIndicatorVisible: true
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { LoadIndicator } from 'devextreme-react/load-indicator';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoadIndicatorVisible: true
};
}
render() {
return (
<LoadIndicator
visible={this.state.isLoadIndicatorVisible}
height={40}
width={40}
/>
);
}
}
export default App;If you need to use a custom image in the LoadIndicator, assign its URL to the indicatorSrc property.
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
],
// ...
})Vue
<template>
<DxLoadIndicator
v-model:visible="isLoadIndicatorVisible"
:indicatorSrc="indicatorUrl"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLoadIndicator } from 'devextreme-vue/load-indicator';
export default {
components: {
DxLoadIndicator
},
data() {
return {
isLoadIndicatorVisible: true,
indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { LoadIndicator } from 'devextreme-react/load-indicator';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoadIndicatorVisible: true
indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
};
}
render() {
return (
<LoadIndicator
visible={this.state.isLoadIndicatorVisible}
indicatorSrc={this.state.indicatorUrl}
/>
);
}
}
export default App;See Also
- Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout
- LoadIndicator - Show and Hide Using the API
- LoadIndicator API Reference
- LoadPanel - Overview
Feedback