-
Notifications
You must be signed in to change notification settings - Fork 265
/
SquareLoader.tsx
38 lines (30 loc) · 1.17 KB
/
SquareLoader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/** @jsxImportSource @emotion/react */
import * as React from "react";
import { keyframes, css, SerializedStyles } from "@emotion/react";
import { sizeDefaults, cssValue } from "./helpers";
import { LoaderSizeProps } from "./interfaces";
const square = keyframes`
25% {transform: rotateX(180deg) rotateY(0)}
50% {transform: rotateX(180deg) rotateY(180deg)}
75% {transform: rotateX(0) rotateY(180deg)}
100% {transform: rotateX(0) rotateY(0)}
`;
class Loader extends React.PureComponent<Required<LoaderSizeProps>> {
public static defaultProps = sizeDefaults(50);
public style = (): SerializedStyles => {
const { color, size, speedMultiplier } = this.props;
return css`
background-color: ${color};
width: ${cssValue(size)};
height: ${cssValue(size)};
display: inline-block;
animation: ${square} ${3 / speedMultiplier}s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);
animation-fill-mode: both;
`;
};
public render(): JSX.Element | null {
const { color, loading, css, speedMultiplier, size, ...styleProps } = this.props;
return loading ? <span css={[this.style(), css]} {...styleProps} /> : null;
}
}
export default Loader;