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