.onboarding-loader {
.onboarding-loader-backdrop {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #E1E4E6;
opacity: 0.5;
}
.tlv-loader {
height: 63px;
width: 63px;
position: absolute;
top: 30%;
left: 50%;
margin-top: -10.5px;
margin-left: -10.5px;
}
.tlv-loader.large {
transform: scale(1);
}
.tlv-loader::before {
background-color: $gray;
border-radius: 50%;
box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
content: '';
display: block;
height: 21px;
width: 21px;
position: absolute;
left: 50%;
margin-left: -10.5px;
}
.tlv-loader::after {
border-radius: 50%;
content: '';
display: block;
position: absolute;
height: 21px;
width: 21px;
animation: dot-move-2 4.5s infinite ease-in;
}
@keyframes dot-move {
0% {
background-color: $blue;
left: 21px;
top: 0;
}
25% {
background-color: $orange;
left: 42px;
top: 21px;
}
50% {
background-color: $light-purple;
left: 21px;
top: 42px;
}
75% {
background-color: $light-green;
left: 0;
top: 21px;
}
100% {
background-color: $blue;
left: 21px;
top: 0;
}
}
@keyframes dot-move-2 {
0% {
background-color: $blue;
left: 21px;
top: 0;
}
6.25% {
background-color: $blue;
left: 42px;
top: 21px;
}
12.5% {
background-color: $blue;
left: 21px;
top: 42px;
}
18.75% {
background-color: $blue;
left: 0;
top: 21px;
}
25% {
background-color: $orange;
left: 21px;
top: 0;
}
31.25% {
background-color: $orange;
left: 42px;
top: 21px;
}
37.5% {
background-color: $orange;
left: 21px;
top: 42px;
}
43.75% {
background-color: $orange;
left: 0;
top: 21px;
}
50% {
background-color: $light-purple;
left: 21px;
top: 0;
}
56.25% {
background-color: $light-purple;
left: 42px;
top: 21px;
}
62.5% {
background-color: $light-purple;
left: 21px;
top: 42px;
}
68.75% {
background-color: $light-purple;
left: 0;
top: 21px;
}
75% {
background-color: $light-green;
left: 21px;
top: 0;
}
81.25% {
background-color: $light-green;
left: 42px;
top: 21px;
}
87.5% {
background-color: $light-green;
left: 21px;
top: 42px;
}
93.75% {
background-color: $light-green;
left: 0;
top: 21px;
}
100% {
background-color: $blue;
left: 21px;
top: 0;
}
}
}