64aa39fe4b
* feat: add animated preloader * feat: add animated preloader - add scss lines * feat: add animated preloader - add scss lines * feat: add animated preloader - ref scss lines * feat: add animated preloader - add preloader property to loader component
51 lines
915 B
SCSS
51 lines
915 B
SCSS
.pre-loader {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@for $i from 0 through 16 {
|
|
.loader-item:nth-child(#{$i}) {
|
|
@if $i % 2 == 0 {
|
|
animation-delay: #{$i * 50 * random(5)}ms;
|
|
animation-direction: reverse;
|
|
} @else {
|
|
animation-delay: #{$i * -50 * random(5)}ms;
|
|
animation-direction: alternate;
|
|
}
|
|
}
|
|
}
|
|
.pre-loader-center {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.pre-loader-wrapper {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.loader-item {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: black;
|
|
animation: flickering 0.4s steps(2, jump-none) alternate infinite;
|
|
}
|
|
}
|
|
@keyframes flickering {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
}
|
|
26% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|