多个循环进度条的问题

Question

我已经使用 https://www.formget.com/css-progress-bar/#circular_progress_bar 中的代码制作了一个圆形进度条并且效果很好，直到我添加了第二个进度条。我不知道如何单独更改每个进度条的百分比 - 谁能帮助我如何做到这一点？ (:

jsfiddle.net/pw87wpyh/1

Answer 1

您的 fiddle 有两个元素的 ID progress_bar。但是 html 元素的 id 必须是唯一的 。这就是为什么两者都达到 80% 的原因。更改第二个进度条的 ID，然后相应地更改 javascript 代码。

在您的 fiddle 中尝试过，但不得不做更多更改并添加了几个 ID：https://jsfiddle.net/pw87wpyh/2/

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="bar_container">
<div id="main_container">
<div id="pbar" class="progress-pie-chart" data-percent="0">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="progress-fill"></div>
</div>
<div class="ppc-percents" id="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>

<progress style="display: none" id="progress_bar" value="0" max="80"></progress>
</div>
</div>



<div class="bar_container">
<div id="main_container">
<div id="pbar2" class="progress-pie-chart" data-percent="0">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="progress-fill2"></div>
</div>
<div class="ppc-percents" id="ppc-percents2">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>

<progress style="display: none" id="progress_bar2" value="0" max="20"></progress>
</div>
</div>

和javascript：

$(document).ready(function() {
var progressbar = $('#progress_bar');
max = progressbar.attr('max');
time = (1000 / max) * 5;
value = progressbar.val();

var progressbar2 = $('#progress_bar2');
max2 = progressbar2.attr('max');
time2 = (1000 / max2) * 5;
value2 = progressbar2.val();

var loading = function() {
if (value < max) {
value += 1;
addValue = progressbar.val(value);
}
if (value2 < max2) {
value2 += 1;
addValue2 = progressbar2.val(value2);
}

$('#progress_bar').html(value + '%');
$('#progress_bar2').html(value2 + '%');

var $ppc = $('#pbar'),
deg = 360 * value / 100;
if (value > 50) {
$ppc.addClass('gt-50');
}

var $ppc2 = $('#pbar2'),
deg2 = 360 * value2 / 100;
if (value2 > 50) {
$ppc2.addClass('gt-50');
}

$('#progress-fill').css('transform', 'rotate(' + deg + 'deg)');
$('#progress-fill2').css('transform', 'rotate(' + deg2 + 'deg)');

$('#ppc-percents span').html(value + '%');
$('#ppc-percents2 span').html(value2 + '%');

if (value == max) {
clearInterval(animate);
}
};

var animate = setInterval(function() {
loading();
}, time);
});

根据需要更改样式。

多个循环进度条的问题

Issues with multiple circular progress bars

html

jquery

progress-bar