Question

有人可以帮助我减少这些进度条的大小吗？

我尝试过更改高度和宽度，但这不起作用。

＆＃13;

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

＆＃13;

/* Pie Chart */
.progress-pie-chart {
width:200px;
height: 200px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: #81CE97;
}

.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip: rect(0, 100px, 200px, 0);
background: #81CE97;
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 200px, 200px, 100px);
background: #E5E5E5;
}

.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 173.91304px/2);
top: calc(50% - 173.91304px/2);
width: 173.91304px;
height: 173.91304px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 2.6em;
font-weight: bold;
color: #81CE97;
}

.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}

.progress-pie-chart {
margin: 50px auto 0;
}</style>

＆＃13;

<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>

＆＃13;

Answer 1

您必须按相同因子减少以像素为单位的样式中的每个尺寸。我评论了正确的地方。

    /* Pie Chart */
.progress-pie-chart {
width:200px; //HERE
height: 200px; //HERE
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: #81CE97;
}

.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px); //HERE
top: calc(50% - 100px); //HERE
width: 200px; //HERE
height: 200px; //HERE
clip: rect(0, 200px, 200px, 100px); //HERE
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px); //HERE
top: calc(50% - 100px); //HERE
width: 200px; //HERE
height: 200px; //HERE
clip: rect(0, 100px, 200px, 0); //HERE
background: #81CE97;
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 100px, 200px, 0); //HERE
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 200px, 200px, 100px); //HERE
background: #E5E5E5;
}

.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 173.91304px/2); //HERE
top: calc(50% - 173.91304px/2); //HERE
width: 173.91304px; //HERE
height: 173.91304px; //HERE
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 2.6em;
font-weight: bold;
color: #81CE97;
}

.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}

.progress-pie-chart {
margin: 50px auto 0; // Here u need to increase
}</style>

缩小进度条的大小

1 个答案: