Loading div page that shows until the page has loaded fully PLUS two seconds

Question

I would like a Loading div page that shows until the page has loaded fully PLUS two seconds.

Until fully loaded. JS, CSS, HTML, the whole lot.

Answered with thanks to my accepted answer + answer two combined!

Does this answer your question? [JavaScript Loading Screen while page loads](https://stackoverflow.com/questions/25253391/javascript-loading-screen-while-page-loads) — Reyno, Jan 25 '21 at 12:23

dexiang · Accepted Answer · 2021-01-26T06:12:36.200

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<style type="text/css">
    #mask {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        background: #000;
        opacity:0.2;
    }
    #loading {
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        border: solid 1px #000;
        background: #333;
        color:#FFF;
    }
</style>
<script type="text/javascript">
    window.addEventListener("load", function(args){
        window.setTimeout(function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("mask").style.display = "none";
        }, 2000);
    });
</script>
<div id="mask">

</div>
<div id="loading">
loading
</div>
<button onclick="javascript:alert('OK')">Click Me</button>
</body>
</html>

Will this show until the page has fully finished loading and then wait two seconds then hide the div and show the page?! — ekv_56, Jan 25 '21 at 12:32
It's worked so far. I would like it to show like its in front of the page, so you can't click anything else on the page, centered and entire page background as black whilst its there? Is that possible? — ekv_56, Jan 25 '21 at 12:36

Amit Saini · Answer 2 · 2021-01-25T12:58:06.327

1

You can do it by Javascript onreadystatechange event. Check below example code:

document.onreadystatechange = function () {
  // page fully load
  if (document.readyState == "complete") {
    // hide loader after 2 seconds
    setTimeout(function(){ 
      document.getElementById('loader').style.display = 'none';
    }, 2000);
  }
}

#loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}

<div id="loader"></div>

edited Jan 25 '21 at 12:58

answered Jan 25 '21 at 12:33

Amit Saini

575
4
11

Thanks Ill give it a shot, do you know how I can use answer 1 (accepted) and do this: I would like it to show like its in front of the page, so you can't click anything else on the page, centered and entire page background as black whilst its there? Is that possible? – ekv_56 Jan 25 '21 at 12:37

Loading div page that shows until the page has loaded fully PLUS two seconds

2 Answers2