.pagewrap {} .container { display: none; } .container.show { display: block; } .pageload-overlay { position: unset; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { position: absolute; top: 0; left: 0; pointer-events: none; } .pageload-overlay svg path { fill: #fff; } .pageload-overlay::after, .pageload-overlay::before { content: ''; position: absolute; width: 20px; height: 20px; top: 40%; left: 50%; margin: -10px 0 0 -10px; border-radius: 50%; visibility: hidden; opacity: 0; z-index: 1000; -webkit-transition: opacity 0.15s, visibility 0s 0.15s; transition: opacity 0.15s, visibility 0s 0.15s; } .pageload-overlay::after { background: #6cc88a; -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: #4fc3f7; -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; }