50 lines
941 B
JavaScript
50 lines
941 B
JavaScript
|
import styled, { keyframes } from 'styled-components';
|
||
|
|
|
||
|
|
const colorGray = '#4E5A66';
|
||
|
|
|
||
|
|
const LoadingSpinnerAnimation = keyframes`
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const LoadingSpinnerWrapper = styled.div`
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 10%;
|
||
|
|
height: 100%;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const LoadingSpinner = styled.div`
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
width: 1.7rem;
|
||
|
|
height: 1.7rem;
|
||
|
|
border: 3px solid ${colorGray};
|
||
|
|
border-radius: 2rem;
|
||
|
|
animation: ${LoadingSpinnerAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||
|
|
border-color: ${colorGray} transparent transparent transparent;
|
||
|
|
cursor: not-allowed;
|
||
|
|
|
||
|
|
&:nth-child(1) {
|
||
|
|
animation-delay: -0.45s;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(2) {
|
||
|
|
animation-delay: -0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3) {
|
||
|
|
animation-delay: -0.15s;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export {
|
||
|
|
LoadingSpinner, LoadingSpinnerWrapper,
|
||
|
|
};
|