mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-27 07:20:23 +05:30
195 lines
3.1 KiB
SCSS
195 lines
3.1 KiB
SCSS
.loader-overlay {
|
|
direction: ltr;
|
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
transition: 0.4s ease;
|
|
|
|
&.is-first-launch {
|
|
// if loader is shown for the first time, we will
|
|
// remove opacity and hide the entire site contents
|
|
background: #f2efeb;
|
|
}
|
|
|
|
&.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.loader {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -75px;
|
|
margin-left: -75px;
|
|
width: 153px;
|
|
height: 153px;
|
|
|
|
&__cube {
|
|
position: absolute;
|
|
margin: -1px;
|
|
padding: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(35, 35, 35, 0.6);
|
|
display: inline-block;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: linear;
|
|
|
|
&--1 {
|
|
margin: 0 0 0 0;
|
|
animation-name: cube1;
|
|
}
|
|
|
|
&--2 {
|
|
margin: 0 0 0 051px;
|
|
animation-name: cube2;
|
|
}
|
|
|
|
&--3 {
|
|
margin: 0 0 0 102px;
|
|
animation-name: cube3;
|
|
}
|
|
|
|
&--4 {
|
|
margin: 51px 0 0 0;
|
|
animation-name: cube4;
|
|
}
|
|
|
|
&--5 {
|
|
margin: 051px 0 0 051px;
|
|
}
|
|
|
|
&--6 {
|
|
margin: 51px 0 0 102px;
|
|
animation-name: cube6;
|
|
}
|
|
|
|
&--7 {
|
|
margin: 102px 0 0 0;
|
|
animation-name: cube7;
|
|
}
|
|
|
|
&--8 {
|
|
margin: 102px 0 0 051px;
|
|
animation-name: cube8;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes cube1 {
|
|
25% {
|
|
margin: 0 0 0 0;
|
|
}
|
|
50% {
|
|
margin: 0 0 0 51px;
|
|
}
|
|
75% {
|
|
margin: 0 0 0 51px;
|
|
}
|
|
100% {
|
|
margin: 0 0 0 51px;
|
|
}
|
|
}
|
|
|
|
@keyframes cube2 {
|
|
25% {
|
|
margin: 0 0 0 51px;
|
|
}
|
|
50% {
|
|
margin: 0 0 0 102px;
|
|
}
|
|
75% {
|
|
margin: 0 0 0 102px;
|
|
}
|
|
100% {
|
|
margin: 0 0 0 102px;
|
|
}
|
|
}
|
|
|
|
@keyframes cube3 {
|
|
25% {
|
|
margin: 51px 0 0 102px;
|
|
}
|
|
50% {
|
|
margin: 51px 0 0 102px;
|
|
}
|
|
75% {
|
|
margin: 51px 0 0 102px;
|
|
}
|
|
100% {
|
|
margin: 51px 0 0 102px;
|
|
}
|
|
}
|
|
|
|
@keyframes cube4 {
|
|
25% {
|
|
margin: 51px 0 0 0;
|
|
}
|
|
50% {
|
|
margin: 51px 0 0 0;
|
|
}
|
|
75% {
|
|
margin: 0 0 0 0;
|
|
}
|
|
100% {
|
|
margin: 0 0 0 0;
|
|
}
|
|
}
|
|
|
|
@keyframes cube6 {
|
|
25% {
|
|
margin: 102px 0 0 102px;
|
|
}
|
|
50% {
|
|
margin: 102px 0 0 102px;
|
|
}
|
|
75% {
|
|
margin: 102px 0 0 102px;
|
|
}
|
|
100% {
|
|
margin: 102px 0 0 51px;
|
|
}
|
|
}
|
|
|
|
@keyframes cube7 {
|
|
25% {
|
|
margin: 102px 0 0 0;
|
|
}
|
|
50% {
|
|
margin: 102px 0 0 0;
|
|
}
|
|
75% {
|
|
margin: 51px 0 0 0;
|
|
}
|
|
100% {
|
|
margin: 51px 0 0 0;
|
|
}
|
|
}
|
|
|
|
@keyframes cube8 {
|
|
25% {
|
|
margin: 102px 0 0 51px;
|
|
}
|
|
50% {
|
|
margin: 102px 0 0 51px;
|
|
}
|
|
75% {
|
|
margin: 102px 0 0 51px;
|
|
}
|
|
100% {
|
|
margin: 102px 0 0 0;
|
|
}
|
|
}
|