我正在尝试创建一个水平线的装载机。我的 html 是:
<div class="animated yt-loader"></div>
我的 CSS 是:
body {
margin: 0;
}
.animated {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.yt-loader {
-webkit-animation-name: horizontalProgressBar;
animation-name: horizontalProgressBar;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
background: #ef534e;
height: 3px;
left: 0;
top: 0;
width: 0%;
z-index: 9999;
position:relative;
}
.yt-loader:after{
display: block;
position: absolute;
content:'';
right: 0px;
width: 100px;
height: 100%;
box-shadow: #ef534e 1px 0 6px 1px;
opacity: 0.5;
}
@keyframes horizontalProgressBar
{
0% {width: 0%;}
20% {width: 10%;}
30% {width: 15%;}
40% {width: 18%;}
50% {width: 20%;}
60% {width: 22%;}
100% {width: 100%;}
}
但是像这样我无法通过数据加载来做到这一点。我需要添加一些延迟或其他任何东西,以便在数据加载 3 秒或 4 秒后,线宽增加 100%。
最佳答案
关于html - 数据加载时的水平加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39874779/