My current struggle lies with a preloader I designed. It features a simple mask effect that appears as follows:
(function() {
'use strict';
setTimeout(function() {
document.body.className = 'loaded';
}, 3000);
})();#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader-wrapper .loader-background {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
}
#loader-wrapper .loader-background::after {
content: '';
position: absolute;
left: 150px;
bottom: 150px;
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 0px 0px 0px 2000px #000000;
-webkit-transition: all 3s;
-moz-transition: all 3s;
transition: all 3s;
}
.loaded #loader-wrapper {
visibility: hidden;
}
.loaded #loader-wrapper .loader-background::after {
-webkit-transform: scale(20);
-moz-transform: scale(20);
-ms-transform: scale(20);
transform: scale(20);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}<h1>This content is visible when the circle exapnds</h1>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-background"></div>
</div>The issue can be observed through this Codepen showcase:
https://codepen.io/r3plica/pen/rwLagV
(Please note that this investigation was conducted on Chrome browser)