加载数据时的水平加载程序

我正在尝试在水平线中创建加载程序。我的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%;} 
}

但是像这样，我无法用数据加载做到这一点。我需要添加一些延迟或其他任何东西，以便在3s或4s之后数据加载时，线宽增加100％。

来源

2016-10-05 vish

有什么问题吗？带有加载文件的JS在哪里？ –

你可以在'.yt-loader'里面加入另一个像'animation-delay：3s'这样的CSS属性'' –

我想在CSS中只在关键帧的基础上才能做到这一点。 – vish

您已将动画持续时间编辑为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>

来源

2016-10-05 13:11:03 Dhaarani

先生，

你必须改变动画的持续时间在Animated类

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

DEMO HERE

来源

2016-10-05 13:13:14

加载数据时的水平加载程序

回答

相关问题