#preloader { background-color: #35363b; } .mainContent { opacity: 1; visibility: visible; -webkit-transition: opacity 400ms ease-out; -moz-transition: opacity 400ms ease-out; transition: opacity 400ms ease-out; } #overlay { position: fixed; z-index: 99; top: -1000%; left: 0; right: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; -webkit-transition: top 0s ease 0.35s, opacity 0.35s ease; -moz-transition: top 0s ease 0.35s, opacity 0.35s ease; transition: top 0s ease 0.35s, opacity 0.35s ease; } .loading #preloader { display: block; } .loading .mainContent { opacity: 0; visibility: hidden; } #preloader { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; } #preloader .preload-text { display: none; } #preloader .preload-icon { width: 70px; height: 70px; display: inline-block; padding: 0px; text-align: left; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; } #preloader .preload-icon span { position: absolute; display: inline-block; width: 70px; height: 70px; border-radius: 100%; background: #000000; -webkit-animation: preloader 1.6s linear infinite; -moz-animation: preloader 1.6s linear infinite; animation: preloader 1.6s linear infinite; } #preloader .preload-icon span:last-child { -webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes preloader { 0% { -webkit-transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } @-moz-keyframes preloader { 0% { -moz-transform: scale(0, 0); opacity: 0.5; } 100% { -moz-transform: scale(1, 1); opacity: 0; } } @keyframes preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } }