AWESOME AI MOTION
효과Effects / 데이터Data / Nº 285

원형 진행 게이지Progress Ring

Progress Ring
원형 진행 게이지
다른 이름Also known as · progress-ring-radial · stat-bars-and-fills
285
도판Fig. 285. 원형 진행 게이지 · Progress Ring · power2.out
재생 속도Speed

원형 선이 목표 비율까지 채워지고 끝점이나 숫자가 같이 움직인다.A circular stroke fills to a target ratio with a synchronized label.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
완료율과 구성비를 직관적으로 읽는다.Makes progress and proportions easy to read.
언제 쓰나Use whenUSE WHEN
  • 75% 완료율까지 원과 숫자를 동시에 채운다.
  • 완료율과 구성비를 직관적으로 읽는다. 기준값과 대상을 함께 표시할 때.
  • Show completion or a share of a total.
  • Keep the encoded values, labels, and visual state synchronized.
과용 주의AvoidAVOID
  • 전체 기준값과 단위를 명시한다.
분류TagsTAGS
데이터Data데이터 증명Data proof비교Compare설명 영상Explainer video발표Presentation데이터 스토리Data story난이도 중급Intermediatesvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

75% 완료율까지 원과 숫자를 동시에 채운다.

과용 · 나쁜 사례OVERUSE

75% 숫자와 완전히 닫힌 원을 함께 표시한다.

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속1000ms600~1500ms비율과 숫자 동기화
목표 비율75%0~100%실제 완료율 사용
시작 각도-90deg-90~0deg12시 방향 권장
반지름120px80~180px1920x1080 기준
GSAP
const tl=gsap.timeline({paused:true}),s={p:0},C=2*Math.PI*120;
gsap.set(ring,{strokeDasharray:C,strokeDashoffset:C,rotation:-90,transformOrigin:'50% 50%'});
tl.to(s,{p:0.75,duration:1,ease:'power2.out',onUpdate:()=>{
 ring.style.strokeDashoffset=C*(1-s.p);
 label.textContent=Math.round(s.p*100)+'%';
}});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 원형 진행 게이지을 적용해. SVG 원 둘레의 dashoffset을 비율로 계산하고 숫자와 같은 진행값을 쓴다. 지속 1000ms; 목표 비율 75%; 시작 각도 -90deg; 반지름 120px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement Progress Ring on <target> in <file>. Fill the ring to 75% over 1000ms with a 120px radius and a minus 90 degree starting angle. Derive both dash offset and percentage label from the same ratio. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 원형 진행 게이지을 적용해. SVG 원 둘레의 dashoffset을 비율로 계산하고 숫자와 같은 진행값을 쓴다. 지속 1000ms; 목표 비율 75%; 시작 각도 -90deg; 반지름 120px을 적용한다. 0초, 0.5초, 1초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Progress Ring on <target> in <file>. Fill the ring to 75% over 1000ms with a 120px radius and a minus 90 degree starting angle. Derive both dash offset and percentage label from the same ratio. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.5s, and 1s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 원형 진행 게이지 상태를 넣고 seek 시 1초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 지속 1000ms; 목표 비율 75%; 시작 각도 -90deg; 반지름 120px을 싣고 75% 완료율까지 원과 숫자를 동시에 채운다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 1초 구간에 매핑한다. scrub에서는 스프링 대신 power2.out을 쓰고 역방향에서도 라벨과 도형을 함께 갱신한다.
06

잘 맞는 조합Pairs well with

카운트업 · Count-up
Nº 242카운트업Count-upCount-up
렌더 추가 예정CLIP COMING
부분 아이콘 채우기Fractional Icon Fill
268
Nº 268부분 아이콘 채우기Fractional Icon FillFractional Icon Fill
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo