react loading component
rc-loading 是一个基于React封装的loading组件;该组件写法模仿ant-design中Spin,是其扩展组件
本组件 动效 也依赖于 antd 的 rc-animate
目前组件支持三种不同的loading样式 详情请见 CSS实现多种loading
版本1.0.0 更新时间: 2018-01-14
安装
npm install rc-loading --save
name | type | default | description |
---|---|---|---|
spinning | Boolean | true | 是否显示spinning |
type | String | ‘fence’ | loading的样式 其他可选值为 ‘ellipsis’,’dynamicEllipsis’ |
displayType | String | ‘block’ | 内联元素和块元素 其他可选值为 ‘inlineBlock’ |
example
import React, { Component } from 'react';
import Loading from 'rc-loading';
class App extends Component {
constructor(props){
super(props)
this.state={
spinning:false
}
}
render() {
return (
<div>
<Loading spinning={this.state.spinning} displayType={"inlineBlock"}>
<span>hello loading</span>
</Loading>
<span onClick={()=>{
this.setState({
spinning:!this.state.spinning,
})
}}>点击</span>
</div>
);
}
}
export default App;
效果