so what i want is to use this loader i found on codepen https://codepen.io/touneko/pen/ygOgWj as a transition in my webpages something like when i click on a button it loads this cat for 2 seconds and then show the other webpage that has the content
i have exported the zip file but i cant figure out how i can connect these
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="container">
<video class="background-video" autoplay loop muted plays-inline >
<source src="images/ripple .mp4" type="video/mp4">
</video>
<div class="logo">
<img class="logo2" src="images/grey.png ">
<div class="divein-container"> <button id="diveInButton" class="divein"> <a href="/loadcat/pure-css-loading-cat/dist/index.html"> Dive In</button> </a> </div>
</div>
</div>
<script>
document.getElementById('diveInButton').addEventListener('click', function() {
window.location.href = 'index.html';
setTimeout(function() {
window.location.href = 'newpage.html';
}, 2000);
});
</script>
</body>
</html>
so the home2 html is my main file the index file is the one containing this loader and the newpage is yk the page i want after it has finished loading
i have tried checking the paths and stuff and all of this is in the same folder