Could anyone guide me on how to display Ring.html for a brief moment until About.html finishes loading completely? I need the Ring.html page to vanish once About.html is fully loaded. As a beginner in web development, I would greatly appreciate your assistance. If jQuery is necessary, please provide step-by-step instructions on where and how to insert the code. I've tried looking at other solutions, but I'm having trouble applying them to my own code.
This is the Ring.html page for my spinner
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="Ring.css" rel="stylesheet">
</head>
<body>
<div class="ring">
Loading
<span></span>
</div>
</body>
</html>
This is the Ring.css code for my spinner
body
{
margin:0;
padding:0;
background:#262626;
}
.ring
{
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
width:150px;
height:150px;
background:transparent;
border-radius:50%;
text-align:center;
line-height:150px;
font-family: 'Pacifico', cursive;;
font-size:20px;
color:#9e1ac9;
letter-spacing:4px;
text-shadow:0 0 10px #9e1ac9;
box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ring
{
border:3px solid #3c3c3c;
}
.ring:before
{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
animation: animateCircle 2s linear infinite;
}
.ring:before
{
border: 3px solid transparent;
border-top: 3px solid #9e1ac9;
border-right: 3px solid #9e1ac9;
}
span
{
display:block;
position: absolute;
top: calc(50% - 2px);
Left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left;
animation: animate 2s linear infinite;
}
span:before
{
content:'';
position:absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #9e1ac9;
top: -6px;
right: -8px;
box-shadow: 0 0 20px #9e1ac9;
}
@keyframes animateCircle
{
0%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
@keyframes animate
{
0%
{
transform:rotate(45deg);
}
100%
{
transform:rotate(405deg);
}
}
This is the About.html
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Elite Prep</title>
</head>
<body>
<header>
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="Nebula2.mp4" type="video/mp4">
</video>
<!-- NavBar-->
<div class="navbar">
<ul>
<li>Elite Prep</li>
<li><a href="Index.html">Home</a></li>
<li><a href="About.html">About</a></li></li>
<li><a href="Team.html">Team</a></li></li>
<li><a href="Pricing.html">Pricing</a></li></li>
<li><a href="Contact.html">Contact</a></li></li>
</ul>
</div>
</navbar>
<!-- About Us-->
<div class="About" id="About">
<div class="roll-in-left" id="roll-in-left">
<h1>Welcome to Elite Prep !</h1>
<p class="text1">On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. Offending she contained mrs led listening resembled. Delicate marianne absolute men dashwood landlord and offended. Suppose cottage between and way. Minuter him own clothes but observe country. Agreement far boy otherwise rapturous incommode favourite.
Behind sooner dining so window excuse he summer. Breakfast met certainty and fulfilled propriety repetition, injected humour, or non-characteristic words etc. </p>
<span> I have no idea what I'm talkin about. This is utterly bullshit </span>
</div>
</div>
</header>
</body>
I want to show Ring.html for a few seconds until About.html fully loads. Ring.html should disappear when About.html fully loads. Since I am new to web developing, I would highly appreciate your help. If jQuery is to be used then please tell me how and where to add the code in baby steps.