То, что у вас есть, - это .box, который является вашим «загрузчиком», и # site-container, где находится контент вашего сайта.
Итак, что я сделал, так это скрыл контент сайта в началепосещения сайта, а затем запустить таймер, и когда он достигнет 0, он удалит загрузчик и сделает контент сайта видимым, поэтому у нас есть иллюзия загрузки на сайт
Это javascript
// Time to remove loading object
var min = 3;
var max = 5;
// Time after site content will be visible
var time = generateRandomInteger(min, max);
// Loader object with class '.box'
var loader = document.getElementsByClassName('box');
// Site container
var siteContainer = document.getElementById('site-container');
// Hide site container
siteContainer.style.display = 'none';
// Set interval every 1000ms (one second)
setInterval(countDown, 1000);
/**
* Count down time
*/
function countDown(){
time--;
// Check if object should be removed
if(time <= 0){
// Remove first object that was found having class .box
loader[0].remove();
// Show site content
siteContainer.style.display = 'block';
// Clear interval
clearInterval(countDown);
}
}
/**
* Returns random integer from min to max range
*/
function generateRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
И это пример содержания моего тела
<body>
<div class='box'>
Content...
</div>
<div id='site-container'>
Site content...
</div>
</body>