LoadMask

ShadowEditor.Web/src/ui/index.js

@@ -52,6 +52,9 @@ export { default as MenuItemSeparator } from './menu/MenuItemSeparator.jsx';
 // panel
 export { default as Panel } from './panel/Panel.jsx';
 
+// progress
+export { default as LoadMask } from './progress/LoadMask.jsx';
+
 // property
 export { default as PropertyGrid } from './property/PropertyGrid.jsx';
 export { default as PropertyGroup } from './property/PropertyGroup.jsx';

ShadowEditor.Web/src/ui/progress/LoadMask.jsx

@@ -0,0 +1,39 @@
+import './css/LoadMask.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 加载动画
+ * @author tengge / https://github.com/tengge1
+ */
+class LoadMask extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { className, style, show, text } = this.props;
+
+        return <div className={classNames('LoadMask', className, !show && 'hidden')} style={style}>
+            <div className={'box'}>
+                <div className={'msg'}>{text}</div>
+            </div>
+        </div>;
+    }
+}
+
+LoadMask.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    show: PropTypes.show,
+    text: PropTypes.string,
+};
+
+LoadMask.defaultProps = {
+    className: null,
+    style: null,
+    show: true,
+    text: 'Waiting...',
+};
+
+export default LoadMask;

ShadowEditor.Web/src/ui/progress/css/LoadMask.css

@@ -0,0 +1,29 @@
+.LoadMask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #ccc;
+    opacity: 0.5;
+    z-index: 100;
+}
+
+.LoadMask>.box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #c3daf9;
+    border: 1px solid #6593cf;
+    padding: 2px;
+}
+
+.LoadMask>.box>.msg {
+    font: normal 12px 'Microsoft YaHei';
+    line-height: 16px;
+    color: #222;
+    background: #fbfbfb url(assets/image/loading.gif) no-repeat 5px 5px;
+    padding: 5px 10px 5px 25px;
+    border: 1px solid #a3bad9;
+    cursor: wait;
+}