我有一个预加载程序,它会显示当网页加载,它会消失后,网页加载加上一秒钟。
我想实现的是,我不希望人们在预装程序显示时能够看到滚动条。我该怎么做?
var loader = document.getElementById("container");
window.addEventListener("load", function() {
window.setTimeout(() => {
loader.style.display = "none";
}, 1000)
})
# container {
background-color: #ddd;
height: 100vh;
}
P {
height: 100vh;
overflow: visible;
}
.loader1{
position: relative;
height: 80px;
width: 80px;
border-radius: 80px;
border: 3px solid rgba(255,255,255, .7);
top: 28%;
top: calc(50% - 43px);
left: 35%;
left: calc(50% - 43px);
-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
-webkit-animation: loader1 3s linear infinite; animation: loader1 3s linear infinite;
}
.loader1:after{
content: "";
position: absolute;
top: -5px;
left: 20px;
width: 11px;
height: 11px;
border-radius: 10px;
background-color: #fff;
}
@-webkit-keyframes loader1{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes loader1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
<div id="container">
<div class="loader1"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
2条答案
按热度按时间m1m5dgzv1#
您可以按如下方式进行操作:
ttvkxqim2#
您可以添加代码
在函数settimeout()中