1import { css, keyframes } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3
4type Props = { isLoading?: boolean };
5
6export const BarLoader = ({ isLoading }: Props) => (
7  <div css={[loaderStyle, isLoading && animationStyle]} />
8);
9
10const lineAnimation = keyframes({
11  '0%': { width: '0%' },
12  '80%': { width: '100%', opacity: 1 },
13  '100%': { width: '100%', opacity: 0 },
14});
15
16const loaderStyle = css({
17  background: theme.text.link,
18  height: '2px',
19  position: 'absolute',
20  marginTop: 11,
21  left: 1,
22});
23
24const animationStyle = css({
25  animation: `${lineAnimation} 2000ms infinite ease-in-out`,
26});
27