https://github.com/kottenator/jquery-circle-progress
<section class="circle">
<div class="item" circleProgress='75'>
<p class="count"></p>
<p class="division">국내 인증 및 특허 등록 건수</p>
</div><!-- .item -->
<div class="item" circleProgress='60'>
<p class="count"></p>
<p class="division">인증 출원 건수</p>
</div><!-- .item -->
<div class="item" circleProgress='45'>
<p class="count"></p>
<p class="division">특허 출원 건수</p>
</div><!-- .item -->
</section><!-- .circle -->
<script>
$('.item').each(function() {
let $num = $(this).attr('circleProgress');
$(this).circleProgress({
value: $num / 100,
size: 280,
fill: "#0092E5",
startAngle: -Math.PI / 2,
thickness: 20,
}).on('circle-animation-progress', function(event, $progress) {
$(this).find('.count').html(Math.round($num * $progress));
});
});
</script>
728x90