93 lines
1.9 KiB
JavaScript
93 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
// based on https://www.npmjs.com/package/react-loading-animation
|
|
|
|
const loading_style = {
|
|
position: 'relative',
|
|
margin: '0 auto',
|
|
width: '30px',
|
|
height: '30px',
|
|
}
|
|
|
|
const svg_style = {
|
|
animation: 'rotate 2s linear infinite',
|
|
height: '100%',
|
|
transformOrigin: 'center center',
|
|
width: '100%',
|
|
position: 'absolute',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
margin: 'auto'
|
|
}
|
|
|
|
const circle_style = {
|
|
strokeDasharray: '1,200',
|
|
strokeDashoffset: '0',
|
|
animation: 'dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite',
|
|
strokeLinecap: 'round'
|
|
}
|
|
|
|
const animation = `@keyframes rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes dash {
|
|
0% {
|
|
stroke-dasharray: 1,200;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
stroke-dasharray: 89,200;
|
|
stroke-dashoffset: -35px;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 89,200;
|
|
stroke-dashoffset: -124px;
|
|
}
|
|
}
|
|
@keyframes color {
|
|
100%, 0% {
|
|
stroke: #a354cd;
|
|
}
|
|
50% {
|
|
stroke: #4fb5c0;
|
|
}
|
|
}`
|
|
|
|
class Loading extends React.Component {
|
|
static propTypes = {
|
|
style: PropTypes.object,
|
|
width: PropTypes.string,
|
|
height: PropTypes.string,
|
|
margin: PropTypes.string
|
|
}
|
|
|
|
static defaultProps = {
|
|
style: {},
|
|
width: '30px',
|
|
height: '30px',
|
|
margin: '0 auto'
|
|
}
|
|
|
|
render () {
|
|
let { width, height, margin, style } = this.props
|
|
|
|
loading_style.width = width
|
|
loading_style.height = height
|
|
loading_style.margin = margin
|
|
|
|
return <div style={Object.assign({}, loading_style, style)}>
|
|
<style>{animation}</style>
|
|
<svg style={svg_style} viewBox="25 25 50 50">
|
|
<circle style={circle_style} cx="50" cy="50" r="20" fill="none" strokeWidth="4" strokeMiterlimit="10"/>
|
|
</svg>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
export default Loading
|