我有这个使用 CSS3 和 CSS3 动画创建的加载器。虽然,我想使用 jQuery 来创建实际的加载功能(取决于我说的秒数。)
例如,我想要这样我可以将其设置为 ex。30 秒将栏加载到满。
目前,我有这个:
<div id="loader">
<div id="bar"></div>
</div>
#bar {
height: 20px;
width: 0px;
background: -webkit-linear-gradient(top, #4892D9, #1960BC);
background: -moz-linear-gradient(top, #4892D9, #1960BC);
background: -ms-linear-gradient(top, #4892D9, #1960BC);
background: -o-linear-gradient(top, #4892D9, #1960BC);
background: linear-gradient(top, #4892D9, #1960BC);
-webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
-moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
-webkit-animation: progress 30s linear forwards;
-moz-animation: progress 2s linear forwards;
-ms-animation: progress 2s linear forwards;
animation: progress 2s linear forwards;
}
加载 iFrame 后,我想启动进度条:
$('#iframe').load(function() {
//Code to start animation here
});
如您所见,#bar 将 css3 动画设置为“2s”。我希望能够通过 jQuery 更改这个数字。我怎样才能做到这一点?