효과Effects / 반복·앰비언트Loop & Ambient / Nº 581

원호 스피너Arc Spinner

Arc Spinner

원호 스피너

다른 이름Also known as · Spinner arc loader · 회전 원호 로더

581

도판Fig. 581. 원호 스피너 · Arc Spinner · none

재생 속도Speed

원호가 돌면서 길어졌다 짧아져 계속 작업 중임을 알린다.A rotating arc alternately lengthens and shortens.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

끝나지 않은 처리 상태를 전달한다.Signals unfinished processing without a completion estimate.

언제 쓰나Use whenUSE WHEN

처리 시간이 정해지지 않은 요청을 표시할 때
작은 버튼 안에 로딩을 표시할 때

Use when presenting arc spinner in a waiting or ambient scene.
Use for a compact status indicator with a stable surrounding layout.

과용 주의AvoidAVOID

원호 길이를 완료율처럼 설명한다.
정보를 읽는 동안 반복 진폭을 키우지 않는다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 분위기Mood 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원호가 1초에 한 바퀴 돌고 1.5초마다 길이가 왕복한다.

과용 · 나쁜 사례OVERUSE

원호 길이를 완료율처럼 설명한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	3s	2.1~4.2s	유한 구간을 호스트 시간으로 반복
회전 주기	1s	0.8~1.4s	3초 구간에서 세 바퀴
길이 주기	1.5s	1.2~2s	회전과 독립
원호 길이	12~72%	10~80%	정량 완료율 아님
이징	none	none	움직임의 가속과 감속

GSAP

const arc = document.querySelector('.arc');
gsap.set(arc, {attr:{pathLength:100}, strokeDasharray:'12 100', transformOrigin:'50% 50%'});
tl.to(arc, {rotation:1080, duration:3, ease:'none'}, 0);
for (let i=0; i<2; i++) {
  tl.to(arc, {strokeDasharray:'72 100', duration:0.75, ease:'sine.inOut'}, i*1.5);
  tl.to(arc, {strokeDasharray:'12 100', duration:0.75, ease:'sine.inOut'}, i*1.5+0.75);
}

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 원호 스피너을 적용해. 3초, 회전 주기 1s; 길이 주기 1.5s; 원호 길이 12~72%, 이징 none로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Arc Spinner to <target> in <file>. Use a 3s segment with none; implement these explicit settings: Rotation period: 1s, Arc length period: 1.5s, Arc length: 12~72%. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 원호 스피너을 적용해. 3초, 회전 주기 1s; 길이 주기 1.5s; 원호 길이 12~72%, none를 사용하고 0초, 1.5초, 3초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Arc Spinner to the <target> layer in <file> with Rotation period: 1s, Arc length period: 1.5s, Arc length: 12~72%, using the supplied core snippet and a 3s segment with none. Capture at 0s, 1.5s, and 3s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.