.sng-spinner-overlay {
max-width: 100% !important;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.4);
margin: 0px;
top: 0px;
left: 0px;
z-index: 999999999999;
display: none;
}
.sng-spinner-shadow {
display: block;
height: 20px;
width: 120px;
background: black;
-webkit-animation: shadowEffect .8s ease-in infinite;
animation: shadowEffect .8s ease-in infinite;
position: absolute;
left: calc(50% - 55px);
top: calc(50% - 55px);
border-radius: 100%;
margin-top: 12px;
}
.sng-spinner {
display: block;
width: 150px;
height: 150px;
background: transparent;
position: absolute;
left: calc(50% - 64px);
top: calc(50% - 150px);
-webkit-animation: jumpCloud .8s ease-in infinite;
animation: jumpCloud .8s ease-in infinite;
z-index: 100000000;
}
.sng-spinner img {
position: absolute;
height: 50px;
width: auto;
margin-top: 85px;
margin-left: 44px;
}
@keyframes shadowEffect {
0% {
opacity: .6;
transform: scale(1);
}
50% {
opacity: .5;
transform: scale(.5);
}
100% {
opacity: .6;
transform: scale(1);
}
}
@-webkit-keyframes shadowEffect {
0% {
opacity: .3;
-webkit-transform: scale(1);
}
50% {
opacity: .2;
-webkit-transform: scale(.5);
}
100% {
opacity: .3;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes jumpCloud {
0% {
-webkit-transform: translateY(0) scale(1.15, .8);
}
20% {
-webkit-transform: translateY(-35px) scaleY(1.1);
}
50% {
-webkit-transform: translateY(-50px) scale(1);
}
80% {
-webkit-transform: translateY(-35px) scale(1);
}
100% {
-webkit-transform: translateY(0) scale(1.15,.8);
}
}
@keyframes jumpCloud {
0% {
transform: translateY(0) scale(1.15, .8);
}
20% {
transform: translateY(-35px) scaleY(1.1);
}
50% {
transform: translateY(-50px) scale(1);
}
80% {
transform: translateY(-35px) scale(1);
}
100% {
transform: translateY(0) scale(1.15,.8);
}
}