website/scss/_loader.scss
2021-07-21 17:07:52 +02:00

66 lines
No EOL
1.2 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;
}
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}