У меня есть этот загрузчик, который я создал с помощью анимации 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. Как я могу это сделать?
Для чего? Нет смысла это делать.
В любом случае, вы ищете jQuery .css
var loadingTime = 30; // Whatever time you want
$('#iframe').load(function() {
$('#bar').css({
'-webkit-animation' : 'progress ' + loadingTime + linear forwards',
'-moz-animation' : 'progress ' + loadingTime + linear forwards',
'-ms-animation' : 'progress ' + loadingTime + linear forwards',
'animation' : 'progress ' + loadingTime + linear forwards'
});
});
Непроверенный, но он должен работать