All files / molecules/LinearProgress style.js

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

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      1x                 1x                                                          
import { keyframes } from '@emotion/react';
import css from '../../util/css';
 
const indeterminate = keyframes`
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
`;
 
export const getProgressStyle = progress =>
  progress === null
    ? {
        animation: `${indeterminate} 1.6s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite`,
        width: '50%',
      }
    : {
        width: `${progress}%`,
      };
 
export default css({
  defaultStyle: {
    position: 'relative',
    '> :first-of-type': {
      height: '100%',
      backgroundColor: 'currentColor',
      opacity: 0.3,
    },
    '> :last-of-type': {
      position: 'absolute',
      top: 0,
      left: 0,
      height: '100%',
      backgroundColor: 'currentColor',
      transition: 'width 0.4s ease',
      willChange: 'width',
    },
  },
});