我想显示 Ring.html 几秒钟,直到 About.html 完全加载。当 About.html 完全加载时,Ring.html 应该会消失。由于我是网络开发的新手,非常感谢您的帮助。如果要使用 jQuery,那么请告诉我如何以及在何处添加小步骤中的代码。我曾尝试查看其他人的答案,但无法理解如何将它们应用于我的代码。
这是我的微调器的 Ring.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>
这是我的微调器的 Ring.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);
}
}
UYOU
拉丁的传说
如何实现在页面上所有内容加载完之前一直显示loading...页面?
总是显示加载中,一直加载不完成?哪里的问题呢?
微信支付页面加载完毕时数据库插入数据
加载不显示前面加载来的数据
相关分类