Your search did not match any results.
Load Panel

Load Panel

Documentation

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import { Button } from 'devextreme-react/button'; import { CheckBox } from 'devextreme-react/check-box'; import { LoadPanel } from 'devextreme-react/load-panel'; import { employee } from './data.js'; const position = { of: '#employee' }; class App extends React.Component { constructor(props) { super(props); this.state = { employeeInfo: {}, loadPanelVisible: false, showIndicator: true, shading: true, showPane: true, closeOnOutsideClick: false }; this.onClick = this.onClick.bind(this); this.hideLoadPanel = this.hideLoadPanel.bind(this); this.onShowIndicatorChange = this.onShowIndicatorChange.bind(this); this.onShadingChange = this.onShadingChange.bind(this); this.onShowPaneChange = this.onShowPaneChange.bind(this); this.onCloseOnOutsideClickChange = this.onCloseOnOutsideClickChange.bind(this); } render() { return ( <React.Fragment> <h1>John Heart</h1> &nbsp; <Button text={'Load Data'} onClick={this.onClick}></Button> <div id={'employee'}> <p> Birth date: <b>{this.state.employeeInfo.Birth_Date}</b> </p> <p className={'address'}> Address:<br /> <b>{this.state.employeeInfo.City}</b><br /> <span>{this.state.employeeInfo.Zipcode}</span> <span>{this.state.employeeInfo.Address}</span> </p> <p> Phone: <b>{this.state.employeeInfo.Mobile_Phone}</b><br /> Email: <b>{this.state.employeeInfo.Email}</b> </p> </div> <LoadPanel shadingColor={'rgba(0,0,0,0.4)'} position={position} onHiding={this.hideLoadPanel} visible={this.state.loadPanelVisible} showIndicator={this.state.showIndicator} shading={this.state.shading} showPane={this.state.showPane} closeOnOutsideClick={this.state.closeOnOutsideClick} /> <div className={'options'}> <div className={'caption'}>Options</div> <div className={'option'}> <CheckBox text={'With indicator'} value={this.state.showIndicator} onValueChanged={this.onShowIndicatorChange} /> </div> <div className={'option'}> <CheckBox text={'With overlay'} value={this.state.shading} onValueChanged={this.onShadingChange} /> </div> <div className={'option'}> <CheckBox text={'With pane'} value={this.state.showPane} onValueChanged={this.onShowPaneChange} /> </div> <div className={'option'}> <CheckBox text={'Close on outside click'} value={this.state.closeOnOutsideClick} onValueChanged={this.onCloseOnOutsideClickChange} /> </div> </div> </React.Fragment> ); } onClick() { this.setState({ employeeInfo: {}, loadPanelVisible: true }, () => { setTimeout(this.hideLoadPanel, 3000); }); } hideLoadPanel() { this.setState({ loadPanelVisible: false, employeeInfo: employee }); } onShowIndicatorChange(e) { this.setState({ showIndicator: e.value }); } onShadingChange(e) { this.setState({ shading: e.value }); } onShowPaneChange(e) { this.setState({ showPane: e.value }); } onCloseOnOutsideClickChange(e) { this.setState({ closeOnOutsideClick: e.value }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
h1 { display: inline-block; vertical-align: middle; padding: 10px; margin: 0; } #employee { margin: 20px 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; } #employee > p { padding: 10px 20px; margin: 0; } .address { height: 60px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }
export const employee = { 'Full_Name': 'John Heart', 'Title': 'CEO', 'Birth_Date': '03/16/1964', 'Prefix': 'Mr.', 'Address': '351 S Hill St.', 'City': 'Los Angeles', 'Zipcode': 90013, 'Email': 'jheart@dx-email.com', 'Skype': 'jheart_DX_skype', 'Home_Phone': '(213) 555-9208', 'Mobile_Phone': '(213) 555-9392' };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });