How to display HTML file for 5 seconds then open another?

Question

I have a loading bar HTML file that I want to open and then play for a certain time, then open my main HTML document.

Answer 1

Both ways load the second page (dog.cafe) after five seconds, Javascript has many different ways to accomplish the same result.

1. Javascript

window.setTimeout(function(){
location.href = "http://www.dog.cafe";
}, 5000);

2. HTML

<meta http-equiv=refresh content="5; url=http://www.dog.cafe">

Answer 2

If you want to do image/animation loader, it's better advised to do that in only one file/document...

Put the loading image/animation inside a container element with this kind of css rule:

#loader {
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:white; /* or any background able to hide page content under the loader container */
}

... and use JS to remove it when you want (as said by @Maz, there are many ways to achieve this goal):

window.onload = function() {
setTimeout(function() {
document.getElementById('#loader').style.display = 'none';
},5000);
};

Some examples of implementing such kind of loaders:

https://code.sololearn.com/W39ioBVR1eJn/?ref=app
https://code.sololearn.com/WQFY6mw16wjK/?ref=app
https://code.sololearn.com/WORIrAy1U9Gn/?ref=app

Answer 3

That would be done with Javascript, you can do something like onpage load, set interval to call a function then go to new page, then delete interval if its on a new tab