.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: #37df21; -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: #ffd119; -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; }