61 lines
1.1 KiB
SCSS
61 lines
1.1 KiB
SCSS
|
.loader {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
transition: visibility 0s, opacity 0.5s linear;
|
||
|
|
background-color: $back-color;
|
||
|
|
|
||
|
|
.loader-dots {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
|
||
|
|
.dots {
|
||
|
|
position: absolute;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: $accent-color;
|
||
|
|
-webkit-animation: loader 1s ease-in-out 0s infinite;
|
||
|
|
animation: loader 1s ease-in-out 0s infinite;
|
||
|
|
|
||
|
|
&:nth-child(1) {
|
||
|
|
-webkit-animation-delay: 0s;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(2) {
|
||
|
|
-webkit-animation-delay: 0.15s;
|
||
|
|
animation-delay: 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3) {
|
||
|
|
-webkit-animation-delay: 0.30s;
|
||
|
|
animation-delay: 0.30s;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(4) {
|
||
|
|
-webkit-animation-delay: 0.45s;
|
||
|
|
animation-delay: 0.45s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loader {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(100px);
|
||
|
|
transform: translateX(100px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|