| 1 |
import React from 'react'; |
| 2 |
import { styled } from '@linaria/react'; |
| 3 |
import { CALYPSO_MEDIUM, CALYPSO } from './colors'; |
| 4 |
|
| 5 |
const SpinnerOuter = styled.div` |
| 6 |
align-items: center; |
| 7 |
color: #00a4bd; |
| 8 |
display: flex; |
| 9 |
flex-direction: column; |
| 10 |
justify-content: center; |
| 11 |
width: 100%; |
| 12 |
height: 100%; |
| 13 |
margin: '2px'; |
| 14 |
`; |
| 15 |
|
| 16 |
const SpinnerInner = styled.div` |
| 17 |
align-items: center; |
| 18 |
display: flex; |
| 19 |
justify-content: center; |
| 20 |
width: 100%; |
| 21 |
height: 100%; |
| 22 |
`; |
| 23 |
|
| 24 |
interface IColorProp { |
| 25 |
color: string; |
| 26 |
} |
| 27 |
|
| 28 |
const Circle = styled.circle<IColorProp>` |
| 29 |
fill: none; |
| 30 |
stroke: ${props => props.color}; |
| 31 |
stroke-width: 5; |
| 32 |
stroke-linecap: round; |
| 33 |
transform-origin: center; |
| 34 |
`; |
| 35 |
|
| 36 |
const AnimatedCircle = styled.circle<IColorProp>` |
| 37 |
fill: none; |
| 38 |
stroke: ${props => props.color}; |
| 39 |
stroke-width: 5; |
| 40 |
stroke-linecap: round; |
| 41 |
transform-origin: center; |
| 42 |
animation: dashAnimation 2s ease-in-out infinite, |
| 43 |
spinAnimation 2s linear infinite; |
| 44 |
|
| 45 |
@keyframes dashAnimation { |
| 46 |
0% { |
| 47 |
stroke-dasharray: 1, 150; |
| 48 |
stroke-dashoffset: 0; |
| 49 |
} |
| 50 |
|
| 51 |
50% { |
| 52 |
stroke-dasharray: 90, 150; |
| 53 |
stroke-dashoffset: -50; |
| 54 |
} |
| 55 |
|
| 56 |
100% { |
| 57 |
stroke-dasharray: 90, 150; |
| 58 |
stroke-dashoffset: -140; |
| 59 |
} |
| 60 |
} |
| 61 |
|
| 62 |
@keyframes spinAnimation { |
| 63 |
transform: rotate(360deg); |
| 64 |
} |
| 65 |
`; |
| 66 |
|
| 67 |
export default function UISpinner({ size = 20 }) { |
| 68 |
return ( |
| 69 |
<SpinnerOuter> |
| 70 |
<SpinnerInner> |
| 71 |
<svg height={size} width={size} viewBox="0 0 50 50"> |
| 72 |
<Circle color={CALYPSO_MEDIUM} cx="25" cy="25" r="22.5" /> |
| 73 |
<AnimatedCircle color={CALYPSO} cx="25" cy="25" r="22.5" /> |
| 74 |
</svg> |
| 75 |
</SpinnerInner> |
| 76 |
</SpinnerOuter> |
| 77 |
); |
| 78 |
} |
| 79 |
|
