Анимировать тег прогресса с чистым Javascript?

Question

Анимировать тег прогресса с чистым Javascript?

0

То, что я хочу сделать, в основном состоит в том, что индикатор выполнения переходит от значения 1-100 за одну секунду. Это не зависит от фактического состояния процесса.

Это мои усилия до сих пор, я не понимаю, почему это не имеет никакого эффекта.

<progress id="progBar" value="0" max="100"> </progress> 

setInterval(function(){

             var pb = document.getElementById("progBar");

                            if (pb.value < 100){
                   pb.value = pb.value + 1;
                }


                },10);

Любые идеи о том, как достичь этого?

Anon Omus 18 апр. 2014, в 01:17

Источник

0

Ваш код прекрасно работает jsfiddle.net/KqpUs
Anri 17 апр. 2014, в 22:27
0

Не уверен, что предыдущий вопрос stackoverflow.com/questions/22393492/progress-bar-wobble-effect может помочь вам
Sunny Patel 17 апр. 2014, в 23:41
0

Пожалуйста, посмотрите следующее: stackoverflow.com/questions/2559268/javascript-progress-bar/…
Suman Bogati 17 дек. 2016, в 12:48

Показать ещё 1 комментарий

Теги:

javascript

html

progress-bar

animation

1 ответ

Ещё вопросы

Ваш код прекрасно работает jsfiddle.net/KqpUs
Не уверен, что предыдущий вопрос stackoverflow.com/questions/22393492/progress-bar-wobble-effect может помочь вам
Пожалуйста, посмотрите следующее: stackoverflow.com/questions/2559268/javascript-progress-bar/…

Bryan Way · Answer 1 · 2014-04-17T20-54-00.000Z

Я бы рекомендовал использовать в основном CSS для этого.

div.progress-bar
{
    /* Your style attributes */

    transition: width 1s;
    -ms-transition: width 1s;
    -o-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
}

Затем в вашем javascript установите ширину так, как хотите. Например (используя jQuery):

$('div.progress-bar').width('100%');

CSS будет анимировать его автоматически.

Если вы хотите поддерживать старые браузеры (т.е. <Internet Explorer 10), вам придется сделать это в JavaScript. Я бы порекомендовал jQuery для этого, поскольку он обрабатывал для вас:

$('div.progress-bar').animate({width: "100%"}, 1000);

Если вам не нужна более старая поддержка браузера, просто придерживайтесь способа использования CSS. jQuery по-прежнему будет использовать JavaScript для анимации, даже если поддержка анимации CSS доступна.