[jQuery] 플러그인으로 원형 차트 애니메이션을 구현해보자!

원형 차트 그래프를 구현하기 위해선 css로도 충분히 가능하지만 jquery 플러그인을 사용하면 손쉽게 효과까지 구현해낼 수 있지요.

✏️ 동그라미 그리는법 시작~ 🤓🎶

📌 circle-progress

저는 circle-progress.js 플러그인을 사용했습니다.

아래의 깃허브 주소에서 다운받을 수 있어요.⤵️
https://github.com/kottenator/jquery-circle-progress

HTML

<div class="graph-wrap active-on-visible" 
     data-active-on-visible-callback-func-name="CircleRun">
    <div class="circle-graph" circleProgress='60'>
        <strong class="circle-percent"></strong>
    </div>
</div>

CSS

.graph-wrap{
    display:flex;
    gap: 50px;
}
.graph {
    position:relative;
}
.graph > strong {
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%);
    font-size:2rem;
}

JavaScript

let circleGraph = $('.circle-graph');
let perNum = circleGraph.attr('circleProgress');
  
circleGraph.circleProgress({
  size: 100, // 그래프 크기
  value: perNum / 100, // 그래프에 표시될 값
  startAngle: 300, // 시작지점
  thickness: 3, // 그래프 두께
  fill: { // 그래프 선 색
    gradient: ["#8780ff", "#ff9998"],
    gradientAngle: Math.PI / 2
  },
  animation: {
    duration: 2200,
    easing: "swing"
  },
  lineCap: "butt", // 그래프 선 모양
  reverse: true // 그래프가 진행되는 방향
});

관련 이벤트

.on('circle-animation-progress', function (event, progress) {
  // 그래프 애니메이션이 진행되는 동안
  // progress - 현재 진행 상태 0.0 ~ 1.0
  $(this).find('.circle-percent').html(Math.round(perNum * progress) + '<i>%</i>');
});

결과

짠~ 쉽게 구현을 했습니다!
circleProgress 옵션은 위의 깃허브에 자세히 나와있어요!

응용해서 다양하게 사용해 보세요~😎

예제

스크롤을 내려보세요⤴️

---

📄 참고자료

https://github.com/kottenator/jquery-circle-progress
https://codepen.io/leejiyun/pen/oNxELez