.page-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.6s ease;
pointer-events: none;
}
html.loaded .page-loader {
opacity: 0;
pointer-events: none;
}
html.skip-loader .page-loader {
display: none !important;
}
.page-loader__indicator {
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
-webkit-mask: url(../images/load.svg) center/contain no-repeat;
mask: url(../images/load.svg) center/contain no-repeat;
}
.page-loader__bg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background-color: #e2e2e2;
}
.page-loader__gauge {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0%;
background-color: #80C476;
animation: page-loader-gauge 2.5s ease-in-out infinite;
}
.page-loader.is-complete .page-loader__gauge {
animation: page-loader-gauge-hold 0s forwards;
}
@keyframes page-loader-gauge {
0% { height: 0%; }
80% { height: 100%; }
100% { height: 100%; }
}
@keyframes page-loader-gauge-hold {
to { height: 100%; }
}
#page {
opacity: 0;
transition: opacity 0.6s ease;
}
html.loaded #page,
html.skip-loader #page {
opacity: 1;
}