Html Question posted in
Some basic documentation can be found here.

How to show white background, on html page loader, instead of page content?

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.

Tags:

2

Answers


  1. 0

    You have to make the div (#loading) absolute position and set 0 to all sides such as top, right, bottom, left.

    Add this line of code to your existing one.

    #loading {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

    I hope it will work

    Login or Signup to reply.
  2. 0

    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;
    z-index: 2;
}

    add a 1 second interval to your code to see loading:

    window.onload = function () {
    setTimeout(() => {
        document.getElementById("loading")
            .style.display = "none"
    }, 1000)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search