import React from 'react'; import { observer } from 'mobx-react-lite'; import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; const pulsing1 = keyframes` 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 0.35; } `; const pulsing2 = keyframes` 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } `; const pulsing3 = keyframes` 0% { opacity: 0.35; } 50% { opacity: 0.35; } 100% { opacity: 1; } `; const Styled = { Wrapper: styled.div` display: inline-flex; justify-content: center; `, Line: styled.div` border-top: 3px solid ${props => props.theme.colors.offWhite}; width: 15px; margin: 20px 1px; &.line-1 { animation: ${pulsing1} 0.8s linear infinite alternate; } &.line-2 { animation: ${pulsing2} 0.8s linear infinite alternate; } &.line-3 { animation: ${pulsing3} 0.8s linear infinite alternate; } `, }; interface Props { className?: string; } const LoaderLines: React.FC<Props> = ({ className }) => { const { Wrapper, Line } = Styled; return ( <Wrapper className={className}> {[1, 2, 3].map(i => ( <Line key={i} className={`line line-${i}`}></Line> ))} </Wrapper> ); }; export default observer(LoaderLines);