.overlay-hide {
background: #fff;
width: 100%;
height: 100%;
z-index: 20000;
position: fixed;
}
.container.show {
display: block;
}
.pageload-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
z-index: 999999;
}
.pageload-overlay.show {
visibility: visible;
}
.pageload-overlay svg {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 200000;
}
.pageload-overlay svg path {
fill: #f1f1f1;
}
.pageload-overlay::after,
.pageload-overlay::before {
content: '';
position: fixed;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
z-index: 9999999;
-webkit-transition: opacity 0.15s, visibility 0s 0.15s;
transition: opacity 0.15s, visibility 0s 0.15s;
}
.pageload-overlay::after {
background: #fdcc32;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-animation: moveRight 0.6s linear infinite alternate;
animation: moveRight 0.6s linear infinite alternate;
}
.pageload-overlay::before {
background: #c50505;
-webkit-transform: translateX(20px);
transform: translateX(20px);
-webkit-animation: moveLeft 0.6s linear infinite alternate;
animation: moveLeft 0.6s linear infinite alternate;
}
@-webkit-keyframes moveRight {
to { -webkit-transform: translateX(20px); }
}
@keyframes moveRight {
to { transform: translateX(20px); }
}
@-webkit-keyframes moveLeft {
to { -webkit-transform: translateX(-20px); }
}
@keyframes moveLeft {
to { transform: translateX(-20px); }
}
.pageload-loading.pageload-overlay::after,
.pageload-loading.pageload-overlay::before {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}