You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.0 KiB
57 lines
1.0 KiB
import styled, { css, keyframes } from 'styled-components'
|
|
|
|
import { LoaderProps } from './types'
|
|
|
|
const animation = keyframes`
|
|
0%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.0);
|
|
}
|
|
`
|
|
|
|
export const Wrapper = styled.div<LoaderProps>`
|
|
position: relative;
|
|
margin: 0 auto;
|
|
|
|
${({ diameter = 1.18 }) => (
|
|
diameter
|
|
? css`
|
|
width: ${diameter}rem;
|
|
height: ${diameter}rem;
|
|
`
|
|
: ''
|
|
)}
|
|
|
|
:before,
|
|
:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
background-color: ${({ color }) => color};
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
animation: ${animation} 1s infinite ease-in-out;
|
|
}
|
|
|
|
:before {
|
|
left: -130%;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
:after {
|
|
left: 130%;
|
|
animation-delay: -0.2s;
|
|
}
|
|
`
|
|
|
|
export const Circles = styled.div<LoaderProps>`
|
|
background-color: ${({ color }) => color};
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
animation: ${animation} 1s infinite ease-in-out;
|
|
`
|
|
|