.spinner-wrapper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: #fff;
visibility: visible;
opacity: 1;
-webkit-transition: visibility 0.5s, opacity 0.3s linear;
-moz-transition: visibility 0.5s, opacity 0.3s linear;
transition: visibility 0.5s, opacity 0.3s linear;
}
.spinner-wrapper .spinner-container{
height: 100%;
width: 100%;
display: table;
}
.spinner-wrapper .spinner-container .spinner-outer{
vertical-align: middle;
height: 100%;
display: table-cell;
}
.spinner-wrapper .spinner-container .spinner-outer .spinner{
position: relative;
margin: 0 auto;
height: 175px;
width: 190px;
box-sizing: border-box;
}
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo{
display: block;
width: 100%;
height: auto;
}
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path{
fill: #1976d2;
opacity: 0;
transform: translateY(14px);
transform-origin: center;
animation: spinner-part 3.08s ease-in-out infinite;
}
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(1){ animation-delay: 0s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(2){ animation-delay: 0.064s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(3){ animation-delay: 0.128s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(4){ animation-delay: 0.192s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(5){ animation-delay: 0.256s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(6){ animation-delay: 0.320s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(7){ animation-delay: 0.384s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(8){ animation-delay: 0.448s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(9){ animation-delay: 0.512s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(10){ animation-delay: 0.576s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(11){ animation-delay: 0.640s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(12){ animation-delay: 0.704s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(13){ animation-delay: 0.768s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(14){ animation-delay: 0.832s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(15){ animation-delay: 0.896s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(16){ animation-delay: 0.960s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(17){ animation-delay: 1.024s; }
.spinner-wrapper .spinner-container .spinner-outer .spinner .spinner-logo path:nth-of-type(18){ animation-delay: 1.088s; }
.spinner-wrapper .spinner-container .spinner-outer p.spinner-text{
font-family: 'Montserrat';
font-size: 16px;
font-weight: 500;
text-align: center;
margin-top: 18px;
}
@keyframes spinner-part{
0%, 18%{
opacity: 0;
transform: translateY(14px);
}
22%, 90%{
opacity: 1;
transform: translateY(0);
}
100%{
opacity: 0;
transform: translateY(-8px);
}
}