сделать псевдопрогресс-бар
Нужно сделать псевдопрогресс-бар (обращаю внимание на Псевдо, нужна просто анимация)
визуальное оформление есть:
<style>
.t {font-weight:bold}
.t {margin-top:150px;}
.lpb{width:250px;border:1px solid #999;padding:1px;height:8px;margin: 10px ;}
.lpt{
width:0; height:100%; background-color:#6188f5;
background-repeat:repeat-x; background-position:0 0;
background-size:16px 8px;
background-image:linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 66%,transparent 66%,transparent); }
</style>
<div class="t">Загрузка пожалуйста подождите</div>
<div class="lpb"> <div style="width: 10%;" class="lpt"></div></div></div>
Необходимо сделать что он был анимирован, т.е. шкала увеличивалась .
Была мысль привязать на width: 10% ява скрип чтобы увеличивал показание, но что то не догоняю как это реализовать.
<script>
$(function () {
$({
n: 0
}).animate({
n: 1E3
}, {
duration: 20E3,
step: function (a) {
$("#test").html(a | 0)
}
})
});
</script>
<div id="test"></div>
Прошу дельного совета.
кстати последний скрипт требует jquery-1.9.1.js
|