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.
2
Answers
You have to make the div (
#loading
) absolute position and set0
to all sides such as top, right, bottom, left.Add this line of code to your existing one.
I hope it will work
I created a new code with blue background for you. add this CSS top of your css code
add a 1 second interval to your code to see loading: