Logging

src/components/Loding/index.js

+import React, {PropTypes} from 'react'
+import { bindActionCreators } from 'redux'
+import { Spin, Alert } from 'antd'
+import { connect } from 'react-redux'
+
+import styles from './index.less'
+
+const defaultProps = {}
+
+const propTypes = {}
+
+class Loding extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        const boxflex = styles["boxflex"];
+        const box_center = styles["box"] + '' + styles['center'];
+        const line = styles["line"];
+        const load_load1_move = styles["load"] + ' ' + styles['load1'] + ' ' + styles['move'];
+        const sc = styles["sc"];
+        const scale = styles["scale"];
+        const scale_delay1 = styles["scale"] + ' ' + styles['delay1'];
+        const scale_delay2 = styles["scale"] + ' ' + styles['delay2'];
+        const li = styles["li"];
+        const fz = styles["fz"];
+
+        const loaing_1_style = {
+            display: 'inline-block',
+            width: '30px',
+            height: '30px',
+        }
+        const loaing_1 = (
+            <div className={box_center}>
+                <span className={load_load1_move} style={loaing_1_style}></span>
+            </div>
+        )
+        const loaing_2 = (
+            <div className={box_center}>
+                <span className={load_load1_move} style={loaing_1_style}><i></i></span>
+            </div>
+        )
+        const loaing_3 = (
+            <div className={box_center}>
+                <span className={sc}>
+                    <i className={scale}></i>
+                    <i className={scale_delay1}></i>
+                    <i className={scale_delay2}></i>
+                </span>
+            </div>
+        )
+        const loaing_4 = (
+            <div className={box_center}>
+                <span className={li}>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                    <i className={line} style={{ height: '26px', width: '7px' }}></i>
+                </span>
+            </div>
+        )
+
+        const loaing_5_style = {
+            display: 'inline-block',
+            width: '30px',
+            height: '30px',
+            border: '6px solid #64efb9'
+        }
+        const loaing_5 = (
+            <div className={box_center}>
+                <span className={li}>
+                    <em className={fz} style={loaing_5_style} ></em>
+                </span>
+            </div>
+        )
+        return (
+            <div>
+                <Spin>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+                <Spin tip={loaing_1}>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+
+                <Spin tip={loaing_2}>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+
+                <Spin tip={loaing_3}>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+
+                <Spin tip={loaing_4}>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+
+                <Spin tip={loaing_5}>
+                    <Alert message="消息提示的文案"
+                        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+                        type="info"
+                        />
+                </Spin>
+            </div>
+        )
+    }
+}
+
+Loding.propTypes = propTypes;
+Loding.defaultProps = defaultProps;
+
+function mapStateToProps(state) {
+    return {
+        // navpath: state.menu.navpath
+    }
+}
+
+export default connect(mapStateToProps)(Loding)

src/components/Loding/index.less

+.boxflex{display:box;display:-webkit-box;}
+.center{display:box;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
+.box{width:200px;height:200px;border:1px solid #ccc;position:relative;}
+.move{animation:move 2s infinite;-webkit-animation:move 2s infinite;}
+.scale{animation:scale 1s infinite;-webkit-animation:scale 1s infinite;}
+.line{animation:line 1s infinite;-webkit-animation:line 1s infinite;}
+.fz{animation:fz 1.5s infinite;-webkit-animation:fz 1.5s infinite;}
+.delay1{animation-delay:0.25s;-webkit-animation-delay:0.25s;}
+.delay2{animation-delay:0.5s;-webkit-animation-delay:0.5s;}
+.load{width:100px;height:100px;border:10px solid #ccc;border-radius:50%;display:block;}
+.load1{border-top:10px solid #64efb9;}
+.load2{position:relative;}
+.load2:before{position:absolute;top:0;left:50%;margin-left:-10px;margin-top:-15px;width:20px;height:20px;border-radius:50%;background:#fff;content:'';box-shadow:0 0 10px #747373;}
+.sc,.li{display:block;}
+.sc i{width:20px;height:20px;background:#64efb9;border-radius:50%;display:inline-block;margin:0 10px;}
+.li i{display:inline-block;background:#64efb9;width:10px;height:50px;margin:0 4px;}
+.li em{background:#fff;border:10px solid #64efb9;width:50px;height:50px;display:inline-block;}
+.li i:nth-child(2){animation-delay:.2s;-webkit-animation-delay:.2s;}
+.li i:nth-child(3){animation-delay:.3s;-webkit-animation-delay:.3s;}
+.li i:nth-child(4){animation-delay:.4s;-webkit-animation-delay:.4s;}
+.li i:nth-child(5){animation-delay:.5s;-webkit-animation-delay:.5s;}
+.li i:nth-child(6){animation-delay:.6s;-webkit-animation-delay:.6s;}
+
+@keyframes move{
+            0%{
+                transform:rotateZ(0);
+            }
+            100%{
+                transform:rotateZ(360deg);
+            }
+        }
+        @-webkit-keyframes move{
+            0%{
+                -webkit-transform:rotateZ(0);
+            }
+            100%{
+                -webkit-transform:rotateZ(360deg);
+            }
+        }
+        @keyframes scale{
+            /*0%{
+                transform:scale3d(1,1,1);
+            }*/
+            50%{
+                transform:scale3d(0,0,0);
+            }
+            /*100%{
+                transform:scale3d(1,1,1);
+            }*/
+        }
+        @-webkit-keyframes scale{
+            /*0%{
+                -webkit-transform:scale3d(1,1,1);
+            }*/
+            50%{
+                -webkit-transform:scale3d(0,0,0);
+            }
+            /*100%{
+                -webkit-transform:scale3d(1,1,1);
+            }*/
+        }
+        @keyframes line{
+            50%{
+                transform:scaleY(0);
+            }
+        }
+        @-webkit-keyframes line{
+            50%{
+                -webkit-transform:scaleY(0);
+            }
+        }
+        @keyframes fz{
+            0%{
+                transform:perspective(160px);
+            }
+            50%{
+                transform:perspective(160px) rotateX(-180deg) rotateY(0); 
+            }
+            100%{
+                transform:perspective(160px) rotateX(-180deg) rotateY(-180deg); 
+            }
+        }
+        @-webkit-keyframes fz{
+            0%{
+                -webkit-transform:perspective(160px);
+            }
+            50%{
+                -webkit-transform:perspective(160px) rotateX(-180deg) rotateY(0); 
+            }
+            100%{
+                -webkit-transform:perspective(160px) rotateX(-180deg) rotateY(-180deg); 
+            }
+        }
\ No newline at end of file

src/feature/topMenu.js

@@ -8,5 +8,10 @@ module.exports = [
           key: 'test',
           name: 'Test',
           icon: 'user'
+        },
+        {
+          key: 'loding',
+          name: '加载效果',
+          icon: 'smile-circle'
         }
      ]

src/routes/index.js

@@ -8,6 +8,7 @@ import Feature1 from '../feature/Feature1';
 import Feature1_1 from '../feature/Feature1-1';
 import Feature1_3 from '../feature/Feature1-3';
 import NotFound from '../components/NotFound';
+import Loding from '../components/Loding';
 
 function validate() {
   // 在路由群载入时做 filter 处理
@@ -22,6 +23,7 @@ const Routes = ({ history }) =>
         <Route path="home" component={Home}/>
         <Route path="app" component={App}/>
         <Route path="test" component={Test}/>
+        <Route path="loding" component={Loding}/>
         <Route path="feature1" component={Feature1}/>
         <Route path="feature1_1" component={Feature1_1}/>
         <Route path="feature1_3" component={Feature1_3}/>