joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
59 lines (55 loc) • 1.82 kB
JavaScript
/**
* 蓝色 圆形 loading
*
* @api {} Loading组件
* @apiName 加载组件
* @apiGroup 组件使用
*
* @apiParam {Int } show 是否展示
* @apiParam {String } title 加载动画注释
*
* @apiSuccessExample {json} 使用案例:
import Loading from "joywok-material-components/lib/loading/index"
<Loading show={true} title={"123123123"}></Loading>
*
*
*/
import React , {Component,Fragment} from 'react';
import {connect} from 'dva';
require('./style/index.css');
import { withStyles } from '@material-ui/core/styles';
require('./style/index.css');
class Loading extends React.Component{
constructor(props) {
super(props);
}
render(){
let self = this;
let data = this.props;
return(
<div className={"loading-components "+(this.props.show?'':'hide') + ' '+(this.props.fixed?"fixed-loading":false)}>
<div className="loading-components-bg"></div>
<div className="loading-components-c">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
{
this.props.title?<div className="loading-components-val">{this.props.title}</div>:''
}
</div>
</div>
)
}
}
export default connect((state)=>{return state})(Loading);