import { styled } from 'styleh-components'
/**
* @todo - should be using fill: white; fill: transparent; when we have as svg
*/
const DominoLoaderStyles = styled.todo`
.domino-loader-parent {
position: relative;
padding: 0;
width: 100px;
height: 25px;
list-style: none;
li {
display: block;
position: absolute;
right: 0;
width: 3px;
height: 25px;
border-radius: 1px;
transform-origin: 50% 100%;
background-color: black;
animation: bar linear 2.8s infinite;
will-change: transform;
&:nth-child(1) {
transform: translateX(0) rotate(0deg);
opacity: 0.2;
}
&:nth-child(2) {
transform: translateX(-15px) rotate(0deg);
animation-delay: -0.4s;
}
&:nth-child(3) {
transform: translateX(-30px) rotate(0deg);
animation-delay: -0.8s;
}
&:nth-child(4) {
transform: translateX(-45px) rotate(10deg);
animation-delay: -1.2s;
}
&:nth-child(5) {
transform: translateX(-60px) rotate(40deg);
animation-delay: -1.6s;
}
&:nth-child(6) {
transform: translateX(-75px) rotate(62deg);
animation-delay: -2s;
}
&:nth-child(7) {
transform: translateX(-90px) rotate(72deg);
animation-delay: -2.4s;
}
}
}
@keyframes bar {
0% {
transform: translateX(0) rotate(0deg);
opacity: 0;
}
14.28% {
transform: translateX(-15px) rotate(0deg);
opacity: 1;
}
28.56% {
transform: translateX(-30px) rotate(0deg);
opacity: 1;
}
37.12% {
transform: translateX(-39px) rotate(0deg);
opacity: 1;
}
42.84% {
transform: translateX(-45px) rotate(10deg);
opacity: 1;
}
57.12% {
transform: translateX(-60px) rotate(40deg);
opacity: 1;
}
71.4% {
transform: translateX(-75px) rotate(62deg);
opacity: 1;
}
85.68% {
transform: translateX(-90px) rotate(72deg);
opacity: 1;
}
100% {
transform: translateX(-105px) rotate(74deg);
opacity: 0;
}
}
`
export { DominoLoaderStyles }
export default DominoLoaderStyles