I want show white background on loader page.
I tried to use background: #ffffff, and background-color: #ffffff but it does not work, and it shows still page content.
Here are my codes:
window.onload =
function(){
document.getElementById("loading")
.style.display ="none"
}.loader{
border: 1px solid #ffffff;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #db3535;
border-right: 1px solid #db3535;
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 999;
}
.loader-a{
border: 1px solid #ffffff;
border-top: 1px solid #db3535;
border-bottom: 1px solid #db3535;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
z-index: 999;
}
.will{
color: #000000;
font-size: 5px;
position: fixed;
text-align: center;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 999;
}
@keyframes spin{
0% {transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}<div id="loading">
<div class="loader"></div>
<div class="loader-a"></div>
<div class="will">
<h1">Loading...</h1>
</div>
</div>any solution?
everything works fine about the loader. but I don’t want it show the page content while it is loading page content.
>Solution :
I created a new code with blue background for you. add this CSS top of your css code
#loading {
position: absolute;
background: #1117cf;
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
add a 1 second interval to your code to see loading:
window.onload = function () {
setTimeout(() => {
document.getElementById("loading")
.style.display = "none"
}, 1000)
}