扫一扫分享
react组件,允许您使用一系列动态生成的图像来使网站的favicon图标产生动画。这个效果可以用作进度或加载指示器,也可以作为一个很酷的小动画,使您的页面脱颖而出。
npm install --save react-loadcon
或者
yarn add react-loadcon
<LoadCon percentage={this.state.percentage} />
LoadCon只会在componentDidMount中触发
import React, { Component } from 'react'
import LoadCon from 'react-loadcon'
export default class ExampleComponent extends Component {
state = {
percentage: 0, // isRequired
status: 'normal', // oneOf(['normal', 'active', 'exception', 'success'])
type: 'pie', // oneOf(['pie', 'donut'])
}
componentDidMount () {
this.apiCall()
}
apiCall = () => {
this.setState({ status: 'active' })
fetch(url)
.then(res => return res.json())
.then(data => {
// normal loading
this.setState({ status: 'normal' })
// loading with success
this.setState({ status: 'success' })
setTimeout(() => {
this.setState({ status: 'normal' })
}, 1500)
})
.catch(e => {
this.setState({ status: 'exception' })
setTimeout(() => {
this.setState({ status: 'normal' })
}, 1500)
})
}
render () {
return (
<LoadCon
percentage={this.state.percentage}
status={this.state.status}
type={this.state.type}
/>
)
}
}
手机预览