Hey there! I'm trying to get my circular counters to display the counter value that I specify in their class and data-percent. However, currently all four counters are only showing the data from the first counter, even though I've set different data-percent values for each counter in the HTML code. Can anyone help me figure out what's wrong and how to fix it? Any assistance would be greatly appreciated! Below is the provided code for better understanding:
The following code snippet is giving me the displayed result as shown in this picture:
https://i.sstatic.net/efSdd.png
Currently, I'm using this JavaScript code snippet:
<script type="text/javascript>
(function () {
var bar, c, percent, r, range;
percent = $('.pie').data('percent');
bar = $('.pie').find('.bar');
r = bar.attr('r');
c = Math.PI * (r * 2);
range = (100 - percent) / 100 * c;
bar.css({
'stroke-dashoffset': c,
'stroke-dasharray': c });
bar.animate({
strokeDashoffset: range
}, 1000, 'linear');
$('.text').prop('Counter', 0).animate({
Counter: percent
},
{
duration: 1000,
step: function (now) {
return $(this).text(Math.ceil(now) + '%');
}
});
}).call(this);
</script>The HTML structure is as follows:
<!--counter new -->
<div class="container-fluid counter">
<div class="row">
<div class="col-lg-3">
<div class="svg-box"><span class="text">0%</span>
<svg class="pie" viewbox="0 0 200 200" data-percent="99">
<circle r="90" cx="100" cy="100"></circle>
<circle class="bar" r="90" cx="100" cy="100"></circle>
</svg>
</div>
</div>
<div class="col-lg-3">
...
</div>
</div>
</div>
<!--counter new end -->"The CSS used for styling is displayed below:
.svg-box {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
z-index: 1;
font-size: 3em;
letter-spacing: 3px;
font-family: "Raleway", Calibri, sans-serif;
color: #fff
}
svg {
transform: rotate(-90deg);
width: 200px;
height: 200px;
background: transparent;
fill: none;
}
svg circle {
stroke-width: 1;
stroke: #999;
}
svg .bar {
stroke-width: 3;
stroke: #ffffff;
stroke-linecap: round;
}
I want the counters to display the value specified in the data-percent attribute that I included in the HTML code. However, all the counters are currently displaying the same value as the first counter. Ideally, I'd like them to display individual data values as shown in this illustration: