html - 数据加载时的水平加载器

Question

我正在尝试创建一个水平线的装载机。我的 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%。

Answer 1

先生，

您必须在 Animated 类中更改动画持续时间

-webkit-animation-duration: 2s;
    animation-duration: 2s;

DEMO HERE