accounts-frontend/src/components/ui/loader/loader.scss
2018-05-13 22:32:22 +03:00

138 lines
2.7 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: .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;}
}