45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import React from "react"
|
|
import Radium from "radium"
|
|
import { colorInfo, sizeInfo } from "ui/style"
|
|
import anime from "animejs"
|
|
|
|
@Radium
|
|
export class Loader extends React.Component {
|
|
render() {
|
|
const size = sizeInfo.loaderSize
|
|
const spacing = sizeInfo.loaderSpacing
|
|
|
|
const addAnimation = (elem, i) => {
|
|
anime({
|
|
targets: elem,
|
|
scale: [
|
|
{ value: 0.0, duration: 800, easing: "easeOutSine", delay: 200 * i },
|
|
{ value: 1.0, duration: 800, easing: "easeOutSine" },
|
|
{ value: 1.0, duration: 200 * (2 - i) },
|
|
],
|
|
loop: true,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div style={{ height: size }}>
|
|
{[0, 1, 2].map((i) => (
|
|
<span
|
|
key={i}
|
|
ref={(elem) => addAnimation(elem, i)}
|
|
style={{
|
|
display: "inline-block",
|
|
marginLeft: i > 0 ? spacing : 0,
|
|
width: size,
|
|
height: size,
|
|
background: colorInfo.textInverse,
|
|
borderSize: 0,
|
|
borderRadius: "100%",
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
}
|