|
|
@@ -18,20 +18,20 @@ const frames = keyframes`
|
|
|
const SpinnerBox = styled.div`
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
+ width: 128px;
|
|
|
+ height: 128px;
|
|
|
`
|
|
|
const Spinner0 = styled.div`
|
|
|
box-sizing: border-box;
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
- width: 51px;
|
|
|
- height: 51px;
|
|
|
- margin: 6px;
|
|
|
- border: 6px solid #fff;
|
|
|
+ width: 107px;
|
|
|
+ height: 107px;
|
|
|
+ margin: 10px;
|
|
|
+ border: 10px solid #ccc;
|
|
|
border-radius: 50%;
|
|
|
animation: ${frames} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
|
- border-color: #fff transparent transparent transparent;
|
|
|
+ border-color: #ccc transparent transparent transparent;
|
|
|
`
|
|
|
const Spinner1 = styled(Spinner0)`animation-delay: -0.45s;`
|
|
|
const Spinner2 = styled(Spinner0)`animation-delay: -0.3s;`
|
