Я хочу показать Ring. html на несколько секунд до полной загрузки About. html. Звонок. html должен исчезнуть, когда About. html полностью загрузится. Поскольку я новичок в веб-разработке, я был бы очень признателен за вашу помощь. Если нужно использовать jQuery, скажите, пожалуйста, как и куда добавить код в маленьких шагах. Я пытался увидеть ответы других людей, но не могу понять, как применить их к моему коду.
Это кольцо. html страница для моего счетчика
<!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>
Это кольцо. css код для моего счетчика
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);
}
}
Это 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>
Я хочу показать Ring. html в течение нескольких секунд до полной загрузки About. html. Звонок. html должен исчезнуть, когда About. html полностью загрузится. Поскольку я новичок в веб-разработке, я был бы очень признателен за вашу помощь. Если нужно использовать jQuery, скажите, пожалуйста, как и куда добавить код в детские шаги.