React LoadIndicator - Overview

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

View Demo

The following code adds a simple LoadIndicator to your page. You can change the UI component size, using the height and width properties.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • 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.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • 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