로딩 컴포넌트는 사용자 경험에 있어 필수적으로 개발되어야하는 컴포넌트로 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>
</>
);
}