accounts-frontend/packages/app/components/ui/loader/loader.scss
2020-05-24 02:08:24 +03:00

193 lines
3.0 KiB
SCSS

.loader-overlay {
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;
}
}