#smily-loader {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
visibility: none;
z-index: -1;
background-color: none;
transition: background-color 600ms;
.text {
position: absolute;
top: -100px; left: 0;
bottom: 0; right: 0;
margin: auto;
width: 100%;
height: 30px;
font-size: 22px;
font-weight: 600;
text-align: center;
color: #fff;
opacity: 0;
transition: all 300ms linear 2s;
}
&.is-active {
transition: background-color 600ms;
background-color: $loader--background;
visibility: visible;
z-index: 99;
.text {
transition: all 300ms linear 2s;
opacity: 1;
}
.mouth {
animation: mouthAnimation 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation-iteration-count: 1;
}
.leftEye,
.rightEye {
width: 2vh;
height: 2vh;
border-radius: 50%;
background: $loader--shape-color;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rightEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.leftEye {
transform: translate(-150%, -50%);
}
.rightEye {
transform: translate(50%, -50%);
}
.mouth {
width: 10vh;
height: 10vh;
border-radius: 50%;
border: solid 1.3vh $loader--shape-color;
border-right: solid 1.3vh rgba(223, 223, 194, 0);
border-left: solid 1.3vh rgba(223, 223, 194, 0);
border-bottom: solid 1.3vh rgba(223, 223, 194, 0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(900deg);
}
}
}
@include keyframes(mouthAnimation) {
0% {
transform: translate(-50%, -50%) rotateX(180deg);
}
10% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
40% {
transform: translate(-50%, -50%) rotateZ(320deg);
}
60% {
transform: translate(-50%, -50%) rotateZ(900deg);
}
100% {
transform: translate(-50%, -50%) rotateZ(900deg);
}
}
@include keyframes(rightEyeAnimation) {
0% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(-50%, -50%)'));
}
50% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(-50%, -50%)'));
}
60% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(50%, -50%)'));
}
70% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(50%, -50%)'));
}
75% {
width: 2vh;
height: 2px;
//@include transform(unquote('translate(50%, -50%)'));
}
80% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(50%, -50%)'));
}
90% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(50%, -50%)'));
}
100% {
width: 2vh;
height: 2vh;
//@include transform(unquote('translate(50%, -50%)'));
}
}
.loader {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 5;
visibility: hidden;
.circle {
position: absolute;
left:0;
margin: auto;
width: 14px;
height: 14px;
@include border-radius(50%);
border: 5px solid #ccc;
&:before {
content: "";
width: 7px;
height: 7px;
@include border-radius(20px);
background: green;
position: absolute;
top:0;bottom:0;
left:0; right:0;
margin: auto;
@include animation(circle 1.4s linear infinite);
}
}
}
@-webkit-keyframes circle {
from {
@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
}
to {
@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
}
}
@-moz-keyframes circle {
from {
@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
}
to {
@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
}
}
@-o-keyframes circle {
from {
@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
}
to {
@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
}
}
@keyframes circle {
from {
@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
}
to {
@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
}
}
@-webkit-keyframes fade-in-out {
from {
@include opacity(0);
}
to {
@include opacity(1);
}
}
@-moz-keyframes fade-in-out {
from {
@include opacity(0);
}
to {
@include opacity(1);
}
}
@-o-keyframes fade-in-out {
from {
@include opacity(0);
}
to {
@include opacity(1);
}
}
@keyframes fade-in-out {
from {
@include opacity(0);
}
to {
@include opacity(1);
}
}