Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 1x | import { keyframes } from '@emotion/react';
import css from '../../util/css';
const spin = keyframes`
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
24% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
100% {
transform: rotate(1800deg);
}
`;
export const getSegmentStyle = (borderWidth, size, color) => ({
animation: `${spin} 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite`,
borderWidth,
borderBottomColor: color,
borderTopColor: color,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderStyle: 'solid',
borderRadius: '50%',
boxSizing: 'border-box',
height: size,
width: size,
willChange: 'transform',
});
export default css({
defaultStyle: {
alignItems: 'center',
display: 'inline-flex',
flexDirection: 'column',
justifyContent: 'center',
pointerEvents: 'none',
position: 'relative',
},
blockLevel: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
|