显示微调器，直到页面完全加载
我想显示 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);
}
}
侃侃尔雅2回答
-
UYOU
window.addEventListener('load', function() { document.getElementById('loader').style.display = 'none';});在这种情况下，您的加载程序必须具有#loader 的 id。 -
拉丁的传说
<body> <div id="load"></div> <div id="contents"> jlkjjlkjlkjlkjlklk </div></body>这是你的身体document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { document.getElementById('contents').style.visibility="hidden"; } else if (state == 'complete') { setTimeout(function(){ document.getElementById('interactive'); document.getElementById('load').style.visibility="hidden"; document.getElementById('contents').style.visibility="visible"; },1000); }}如果 readyState 等于 complete，这将是语句触发器， document.readyState可以有 3 个值，即loading,interactive和complete..如果document.readyState变为complete，则微调器隐藏..你应该让你的微调器全屏，最重要的是.ring { width:100%; height:100%; position:fixed; z-index:999;}
随时随地看视频慕课网APP
相关分类
JavaScript