.page-load { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #32393F; z-index: 100; transition: opacity 200ms; -webkit-transition: opacity 200ms; } .pl-0{ opacity: 0; } .pl-1 { display: none; } .pl-inner { position: absolute; width: 100px; height: 100px; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; text-align: center; -webkit-animation: fade-in 500ms; animation: fade-in 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: 350ms; -webkit-animation-delay: 350ms; -webkit-backface-visibility: visible; backface-visibility: visible; } .pl-inner:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; -webkit-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; border: 1px solid rgba(255, 255, 255, 0.2);; border-left-color: #fff; border-radius: 50%; } .pl-inner > img { width: 30px; margin-top: 21px; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }