Неправильная ширина индикатора выполнения

Я создал анимированный индикатор выполнения, но он работает не так, как хотелось.

Я хочу, чтобы отображалось 20 % полосы, но вместо этого отображается 100 % полосы.

Однако проценты отображаются правильно.

Я ссылаюсь на jquery и Modernizr.

Вот мой яваскрипт

$(документ).ready(функция() {

if(!Modernizr.meter){

alert('К сожалению, ваш браузер не поддерживает индикатор выполнения HTML5');

} еще {

вар прогрессбар = $('#прогрессбар'),

Макс = прогрессбар.attr('макс'),

время = (1000/макс)*5,

значение = прогрессбар.вал();

вар загрузка = функция() { значение += 1; addValue = Progressbar.val(значение); $('.progress-value').html(значение + '%'); если (значение == макс) { ClearInterval (анимация); } }; вар animate = setInterval(function() { загрузка(); }, время); }; }); И вот мой HTML: 20%

Ваша проблема заключалась в том, что вы управляли ими как одним и тем же. Это отлично работает:
https://jsfiddle.net/76ez3Luk/2/

 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>


<script type="text/javascript">//<![CDATA[


$(window).load(function(){


$(document).ready(function() {


var progressbarB = $('#progressbar'),


max = progressbarB.data('max'),


time = (1000 / max) * 5,


valueB = progressbarB.val();


var loadingB = function() {


valueB += 1;


addValueB = progressbarB.val(valueB);


$('.progress-value').html(valueB + '%');


if (valueB == max) {


clearInterval(animateB);


}


};


var animateB = setInterval(function() {


loadingB();


}, time);


});


$(document).ready(function() {


var progressbar = $('#progressbar-2'),


max = progressbar.data('max'),


time = (1000 / max) * 5,


value = progressbar.val();


var loading = function() {


value += 1;


addValue = progressbar.val(value);


$('.progress-value-2').html(value + '%');


if (value == max) {


clearInterval(animate);


}


};


var animate = setInterval(function() {


loading();


}, time);


});


});//]]>


</script>


<progress id="progressbar" value="0" max="100" data-max="20"></progress>


<span class="progress-value">20%</span>


<progress id="progressbar-2" value="0" max="100" data-max="30"></progress>


<span class="progress-value-2">30%</span>

Код (разметка):

Установите максимальное значение Progress#progressbar равным 100 вместо 20. Но тогда... span.progressvalue уже содержит окончательное значение (= 20) Хм, я думаю, вы смешиваете максимальное и целевое значение (окончательное значение). Они разные.

Это код, который я использую, но не работает:

$(документ).ready(функция() {

вар ProgressBarB = $('#progressbar-2'),

Макс = прогрессбарБ.данные('макс'),

время = (1000/макс)*5,

значениеB = ProgressBarB.val();

вар loadingB = функция() {

значениеБ += 1;

addValueB = ProgressbarB.val(valueB);

$('.progress-value-2').html(valueB + '%');

если (значениеB == макс) {

ClearInterval (animateB);

}

};

вар animateB = setInterval(function() {

загрузкаБ();

}, время);

вар прогрессбар = $('#прогрессбар'),

Макс = прогрессбар.данные('макс'),

время = (1000/макс)*5,

значение = прогрессбар.вал();

вар загрузка = функция() {

значение += 1;

addValue = Progressbar.val(значение);

$('.progress-value').html(значение + '%');

если (значение == макс) {

ClearInterval (анимация);

}

};

вар animate = setInterval(function() {

загрузка();

}, время);

});