I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected.
The Issue:
I discovered that using window.onload as a function was incorrect, and I needed to change it to "window.onload = loader;". Additionally, I had to set the display property to "inline".
After making these changes, everything worked perfectly!
window.onload(loader)
function loader(){
document.getElementById("page").style.removeProperty("display");
}#page{
display: none;
}
/* Loading */
#loading{
width: 100%;
height:100vh;
background-color: #428BCA;
}
.loading_container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#spin {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#loading h1{
color: #FFF;
margin-left:10px;
}<div id="page">
Content!
</div>
<div id="loading">
<div class="loading_container">
<div id="spin"></div>
<h1>Loading...</h1>
</div>
</div>