🕹 스크립트

jquery circleProgress 라이브러리

(。θᗨθ。) 2025. 1. 6. 16:59

https://github.com/kottenator/jquery-circle-progress

 

GitHub - kottenator/jquery-circle-progress: jQuery Plugin to draw animated circular progress bars

jQuery Plugin to draw animated circular progress bars - kottenator/jquery-circle-progress

github.com

<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