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, }, }); |