项目作者: ElonXun

项目描述 :
react loading component
高级语言: CSS
项目地址: git://github.com/ElonXun/rc-loading.git
创建时间: 2018-01-12T13:34:23Z
项目社区:https://github.com/ElonXun/rc-loading

开源协议:

下载


rc-loading

NPM

rc-loading 是一个基于React封装的loading组件;该组件写法模仿ant-design中Spin,是其扩展组件

本组件 动效 也依赖于 antd 的 rc-animate

目前组件支持三种不同的loading样式 详情请见 CSS实现多种loading

更新

版本1.0.0 更新时间: 2018-01-14

安装

  1. npm install rc-loading --save

用法

name type default description
spinning Boolean true 是否显示spinning
type String ‘fence’ loading的样式 其他可选值为 ‘ellipsis’,’dynamicEllipsis’
displayType String ‘block’ 内联元素和块元素 其他可选值为 ‘inlineBlock’

example

  1. import React, { Component } from 'react';
  2. import Loading from 'rc-loading';
  3. class App extends Component {
  4. constructor(props){
  5. super(props)
  6. this.state={
  7. spinning:false
  8. }
  9. }
  10. render() {
  11. return (
  12. <div>
  13. <Loading spinning={this.state.spinning} displayType={"inlineBlock"}>
  14. <span>hello loading</span>
  15. </Loading>
  16. <span onClick={()=>{
  17. this.setState({
  18. spinning:!this.state.spinning,
  19. })
  20. }}>点击</span>
  21. </div>
  22. );
  23. }
  24. }
  25. export default App;

效果

image