сделать псевдопрогресс-бар
 

Нужно сделать псевдопрогресс-бар (обращаю внимание на Псевдо, нужна просто анимация)

визуальное оформление есть:


<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

sem505,
http://javascript.ru/forum/project/5...tml#post375263

обязательное требование привязать к существующему дизайну

читать про css

за скрип спасибо с дизайном разобрался, один вопрос, как задать интервал движения чтобы шел секунд 10

читать про css всётаки
transition: all 0.8s ease;

sem505,
CSSProgress