预加载器图标的编码使用HTML,CSS和Javascript,但当我从浏览器控制台禁用javascript时,它不会隐藏,因为当google爬行到索引页面时,它将禁用javascript和CSS。没有javascript和CSS的预加载器有没有其他的解决方案?请帮帮我。
我的Html:
<div id="loader-wrapper">
<div id="loader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
overflow: hidden;
}
#loader {
width: 90px;
height: 65px;
position: relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
#loader ul {
margin: 0;
list-style: none;
width: 90px;
width: 90px;
position: relative;
padding: 0;
height: 10px;
}
#loader ul li {
position: absolute;
width: 2px;
height: 0;
background-color: #f1582a;
bottom: 0;
}
@keyframes sequence1 {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
@keyframes sequence2 {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
#loader li:nth-child(1) {
left: 0;
animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2) {
left: 15px;
animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3) {
left: 30px;
animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
left: 45px;
animation: sequence2 1s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
left: 60px;
animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6) {
left: 75px;
animation: sequence2 1s ease infinite 0.5s;
}
JS:
function prealoader () {
if ($('#loader').length) {
$('#loader').fadeOut(); // will first fade out the loading animation
$('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
};
}
发布于 2019-07-17 15:11:04
您可以使用动画SVG图标来进行动画处理。
https://stackoverflow.com/questions/57078869
复制