All files / molecules/Spinner style.js

66.66% Statements 2/3
100% Branches 0/0
0% Functions 0/1
100% Lines 2/2

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