Question

我已使用https://www.formget.com/css-progress-bar/#circular_progress_bar中的代码制作循环进度条并且工作正常，直到我添加第二个。我不知道如何更改进度条单独为每个进度条所占的百分比 - 有人可以帮助我如何做到这一点吗？（：

jsfiddle.net/pw87wpyh/1

Answer 1

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

尝试在你的小提琴中，不得不改变一点，并添加了几个ID：here

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);
});

根据需要更改样式。

多个循环进度条的问题

1 个答案: