React LoadCon 介绍
react组件，允许您使用一系列动态 生成 的图像来使网站的favicon图标产生动画。这个 效果 可以用作进度或加载指示器，也可以作为 一个 很酷的小动画，使您的 页面 脱颖而出。
react LoadCon安装
npm install --save react-loadcon或者yarn add react-loadconreact 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,// is required
status: ' nor mal',// oneOf([' nor mal','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 => {
// nor mal loading
this.setState({ status: ' nor mal' })
// loading with success
this.setState({ status: 'success' })
setTimeout(() => {
this.setState({ status: ' nor mal' })
},1500)
})
.catch(e => {
this.setState({ status: 'exception' })
setTimeout(() => {
this.setState({ status: ' nor mal' })
},1500)
})
}
render () {
return (
<LoadCon
percentage={this.state.percentage}
status={this.state.status}
type={this.state.type}
/>
)
}
}
网站地址 : https://foreseaz.github.io/react-loadcon/
GitHub: https://github.com/foreseaz/react-loadcon
网站描述: React组件来操作favicon，用于加载或进度
React LoadCon官方网站
官方网站： https://foreseaz.github.io/react-loadcon/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。