189d2c67fSBartosz Kaszubowskiimport { css, keyframes } from '@emotion/react'; 289d2c67fSBartosz Kaszubowskiimport { theme } from '@expo/styleguide'; 389d2c67fSBartosz Kaszubowski 489d2c67fSBartosz Kaszubowskitype Props = { isLoading?: boolean }; 589d2c67fSBartosz Kaszubowski 689d2c67fSBartosz Kaszubowskiexport const BarLoader = ({ isLoading }: Props) => ( 789d2c67fSBartosz Kaszubowski <div css={[loaderStyle, isLoading && animationStyle]} /> 889d2c67fSBartosz Kaszubowski); 989d2c67fSBartosz Kaszubowski 1089d2c67fSBartosz Kaszubowskiconst lineAnimation = keyframes({ 1189d2c67fSBartosz Kaszubowski '0%': { width: '0%' }, 1289d2c67fSBartosz Kaszubowski '80%': { width: '100%', opacity: 1 }, 1389d2c67fSBartosz Kaszubowski '100%': { width: '100%', opacity: 0 }, 1489d2c67fSBartosz Kaszubowski}); 1589d2c67fSBartosz Kaszubowski 1689d2c67fSBartosz Kaszubowskiconst loaderStyle = css({ 17*14c78e61SJon Samp background: theme.text.link, 1889d2c67fSBartosz Kaszubowski height: '2px', 1989d2c67fSBartosz Kaszubowski position: 'absolute', 2089d2c67fSBartosz Kaszubowski marginTop: 11, 2189d2c67fSBartosz Kaszubowski left: 1, 2289d2c67fSBartosz Kaszubowski}); 2389d2c67fSBartosz Kaszubowski 2489d2c67fSBartosz Kaszubowskiconst animationStyle = css({ 2589d2c67fSBartosz Kaszubowski animation: `${lineAnimation} 2000ms infinite ease-in-out`, 2689d2c67fSBartosz Kaszubowski}); 27