If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import { Button } from 'devextreme-react/button';
import { LoadIndicator } from 'devextreme-react/load-indicator';
export default function App() {
const [loadIndicatorVisible, setLoadIndicatorVisible] = useState(false);
const [buttonText, setButtonText] = useState('Send');
const handleClick = useCallback(() => {
setLoadIndicatorVisible(true);
setButtonText('Sending');
setTimeout(() => {
setLoadIndicatorVisible(false);
setButtonText('Send');
}, 2000);
}, [setLoadIndicatorVisible, setButtonText]);
return (
<div className="form">
<div className="label">Custom size</div>
<div className="indicators">
<LoadIndicator id="small-indicator" height={20} width={20} />
<LoadIndicator id="medium-indicator" height={40} width={40} />
<LoadIndicator id="large-indicator" height={60} width={60} />
</div>
<div className="label">Custom image</div>
<LoadIndicator id="image-indicator" indicatorSrc="images/Loading.gif" />
<div className="label">Using with other widgets</div>
<Button
id="button"
width={180}
height={40}
onClick={handleClick}
>
<LoadIndicator className="button-indicator" visible={loadIndicatorVisible} />
<span className="dx-button-text">{buttonText}</span>
</Button>
</div>
);
}
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import { Button } from 'devextreme-react/button';
import { LoadIndicator } from 'devextreme-react/load-indicator';
export default function App() {
const [loadIndicatorVisible, setLoadIndicatorVisible] = useState(false);
const [buttonText, setButtonText] = useState('Send');
const handleClick = useCallback(() => {
setLoadIndicatorVisible(true);
setButtonText('Sending');
setTimeout(() => {
setLoadIndicatorVisible(false);
setButtonText('Send');
}, 2000);
}, [setLoadIndicatorVisible, setButtonText]);
return (
<div className="form">
<div className="label">Custom size</div>
<div className="indicators">
<LoadIndicator
id="small-indicator"
height={20}
width={20}
/>
<LoadIndicator
id="medium-indicator"
height={40}
width={40}
/>
<LoadIndicator
id="large-indicator"
height={60}
width={60}
/>
</div>
<div className="label">Custom image</div>
<LoadIndicator
id="image-indicator"
indicatorSrc="images/Loading.gif"
/>
<div className="label">Using with other widgets</div>
<Button
id="button"
width={180}
height={40}
onClick={handleClick}
>
<LoadIndicator
className="button-indicator"
visible={loadIndicatorVisible}
/>
<span className="dx-button-text">{buttonText}</span>
</Button>
</div>
);
}
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.form {
padding: 10px 0 0 10px;
}
.label {
margin-bottom: 10px;
font-size: 16px;
}
.label:not(:first-child) {
margin-top: 30px;
}
#small-indicator,
#medium-indicator,
#large-indicator {
vertical-align: middle;
margin-right: 10px;
}
#button,
#button .dx-button-content {
padding: 0;
}
#button .button-indicator {
height: 32px;
width: 32px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.indicators {
display: flex;
align-items: center;
}
Specify Dimensions
LoadIndicator allows you to specify its dimensions. Set the height and width properties to the size you need. In this demo, the first three components have different sizes.
Apply a Custom Indicator
If you want to apply a custom indicator, assign the path to a new image to the indicatorSrc property. In this demo, the fourth LoadIndicator displays a custom animated GIF.
Integrate LoadIndicator into Other Components
You can use LoadIndicator within other UI components. In this demo, the indicator appears in the Button component when a user clicks the button. To show and hide LoadIndicator, use the visible property.