How to do a simple site preload?

Question

css

I want to know how to make it so that while the main content is loading, there is a splash screen on the whole screen, and then it disappears ?

I have a ready-made site, but due to the large amount of photos and, in principle, the information itself, it takes a long time to load. Therefore, I decided to think about creating an element that hides this for some time.
How to arrange it in html and CSS code so that the splash screen loads first, and then disappears completely after 10 seconds?

Answer 1

If you need to make a preloader not by the time of loading all assets, but by a timer, the following code will do

<div class="vk-preloader">
  <style type="text/css" scoped>
    .vk-preloader {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #bbb;
      text-align: center;
      font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
      font-size: 50px;
      font-weight: bold;
      color: #333;
    }

    .vk-preloader.hidden {
      opacity: 0;
      transition: opacity 2s;
    }

    .vk-preloader.none {
      display: none;
    }

  </style>

  Hello World
</div>
<script>
  const TIME_TO_WAIT = 4;
  const preloader = document.querySelector('.vk-preloader');
  const removePreloader = function() {
    preloader.classList.add("none");
    preloader.removeEventListener('transitionend', removePreloader);
  };
  const hidePreloader = function() {
    preloader.classList.add("hidden");
    preloader.addEventListener('transitionend', removePreloader);
  };
  if (preloader) {
    setTimeout(hidePreloader, TIME_TO_WAIT * 1000);
  }

</script>

If you need to track the loading of all assets, then the last three lines need to be replaced

if (preloader) {
    window.addEventListener('load', (event) => {
      hidePreloader()
    });
  }

Answer 2

The answer to your question :)