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