리액트 로딩 컴포넌트 개발 (bounce 스타일)

로딩 컴포넌트는 사용자 경험에 있어 필수적으로 개발되어야하는 컴포넌트로 bounce 스타일로 만들어 보겠습니다.
emotion keyframes을 사용해서 css만으로 로딩중인 상태를 나타내도록 만들어 보았습니다.

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import colors from '../style/colors';

const bounce = keyframes`
  0 {
    transform: translateY(0);
  }
  50% {
      transform: translateY(-15px);
  }
  100% {
      transform: translateY(0);
  }
`;

const Text = styled.div({
  width: '80px',
  margin: '0 auto',
  animation: `${bounce} 3s ease infinite`,
  fontSize: '13px',
  textAlign: 'center',
  color: `${colors.gray_text02}`,
});

const Container = styled.div({
  width: '80px',
  margin: '0 auto',
});

const BoxStyle = styled.div({
  float: 'left',
  width: '30%',
  padding: '5px',
});

const LoadingIcon = styled.div({
  width: '20px',
  height: '20px',
  borderRadius: '100%',
  background: `${colors.gray_text}`,
  animation: `${bounce} 3s ease infinite`,
});

export default function Loading() {
  return (
    <>
      <Text>
        로딩중
      </Text>
      <Container>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
      </Container>
    </>
  );
}