스킬바

<div class="content">contents</div>
  .progress-bar {
  $(function () {

1.1. 스킬바 원형
완성화면
HTML
CSS
JS
<section>
  .charts {
$(function () {

1.2. 막대형2
지시문
HTML
CSS
JS
완성
  <section>
.charts {
var charts = $('.charts');

2. with GSAP

gsap 을 사용해보자

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

완성

html

<div class="circular-pbar">
  <span class="circular-pbar-counter">0</span>
</div>


css

.circular-pbar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(darkred 33%, 0, black);
  position: relative;
}
.circular-pbar-counter {
  position: absolute;
  font-size: 3em;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


css

요약
.circular-pbar 그라디언트 색상변경
지역변수 —p 선언후 0 할당
배경으로 grey 색상을 지정하고 색상의 location에 변수를 할당한다.

.circular-pbar {
  --p: 0;
  background: conic-gradient(#df3030 var(--p, 0), 0, #cacaca);
}


js
:::note
gsap.to 를 사용하여 변수 p의 값인 location 을 변경한다
:::

gsap.to('.circular-pbar', {
  '--p': '33%',
  duration: 4,
  ease: 'expo.out',
});

완성화면
참고
숫자를 애니메이트 해보자

const circles = document.querySelectorAll('.circular-pbar');
circles.forEach((el) => {
  const counter = el.querySelector('.circular-pbar-counter');
  const tg = counter.textContent + '%';

  const tm = gsap.timeline({
    defaults: { duration: 4, ease: 'expo.out' },
    scrollTrigger: {
      trigger: el,
      toggleActions: 'play pause resume reset',
    },
  });

  tm.from(counter, {
    textContent: 0,
    modifiers: {
      textContent: (textContent) => {
        return textContent.toFixed();
      },
    },
  });
  tm.to(el, { '--p': tg }, 0);
});


#4- counter 요소의 텍스트(목표 진행률 값)을 읽어와서 ’%’ 문자와 결합. 이 값은 나중에 CSS 변수로 사용됨.
#6~7- GSAP 타임라인 생성 후 기본값으로  지속 시간(4초), 가속도 효과(‘expo.out’) 할당
#16 - modifiers 플러그인은 gsap 의 기본으로 내장된 것으로 특정속성의 변경값을 실시간으로 수정해준다.

모든 애니메이션에 사용 가능하며 개발자가 원하는 모든 속성에 적용할수 있다.
이때 함수를 사용해야 한다.