データロード時のローダーローダー

Question

ローダーを水平線のように作成しようとしています。私のHTMLは次のとおりです。

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%;} 
} 

しかし、このように私は、データのロードでこれを行うことができません：

<div class="animated yt-loader"></div> 

私のCSSがあります。 3秒後または4秒後にデータがライン幅を100％増加させるように遅延やその他のものを追加する必要があります。

Answer 1

アニメーションの再生時間を2秒または4秒として編集しました。

body { 
 
    margin: 0; 
 
} 
 
.animated { 
 
    -webkit-animation-duration: 2s; 
 
    animation-duration: 2s; 
 
    -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%;} 
 
}

<div class="animated yt-loader"></div>

Answer 2

先生、あなたはAnimatedクラスでアニメーションの継続時間を変更する必要が

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

DEMO HERE