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

인피니티 로더Infinity Path Loader

Infinity Path Loader

인피니티 로더

다른 이름Also known as · 무한대 경로 로더

608

렌더 추가 예정CLIP COMING인피니티 로더Infinity Path Loader정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 608. 인피니티 로더 · Infinity Path Loader · linear

점이나 짧은 선이 무한대 모양 경로를 끊김 없이 돈다.A short stroke travels continuously around an infinity path.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

끝없이 이어지는 진행을 표현한다.Suggests uninterrupted ongoing progress.

언제 쓰나Use whenUSE WHEN

동기화 표시에서 지속 활동을 표시할 때
짧은 반복으로 끝없이 이어지는 진행을 표현한다 때

Show continuous synchronization with an infinity-shaped route.
Use a short repeating motion to communicate suggests uninterrupted ongoing progress.

과용 주의AvoidAVOID

선분이 교차점을 지날 때 갑자기 다른 경로로 점프한다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

반복·앰비언트Loop & Ambient 피드백Feedback 순서·흐름Sequence 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

동기화 표시에서 무한대 경로의 짧은 선분이 2초마다 한 바퀴 돈다

과용 · 나쁜 사례OVERUSE

선분이 교차점을 지날 때 갑자기 다른 경로로 점프한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	2000ms	1500~3000ms	한 번의 반복에 걸리는 시간이다
경로 폭	80px	60~140px	viewBox 비율을 유지한다
선분 길이	18%	10~25%	pathLength 100 기준이다
이징	linear	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { width:80px; overflow:visible; }
.fx path { fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-dasharray:18 82; animation:infinity 2s linear infinite; }
@keyframes infinity {
  to { stroke-dashoffset:-100; }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 인피니티 로더를 적용해. 주기 2000ms, 경로 폭 80px, 선분 길이 18%, 이징 linear로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해. SVG 경로에 pathLength="100"을 지정해.

Apply Infinity Path Loader to <target>. Use a 2-second cycle, an 80px wide closed SVG path with pathLength="100" and an 18-unit dash, and linear easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 인피니티 로더를 적용해. 주기 2000ms, 경로 폭 80px, 선분 길이 18%, 이징 linear를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 1초, 2초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Infinity Path Loader in the waiting indicator or background region of <file>. Use a 2-second cycle, an 80px wide closed SVG path with pathLength="100" and an 18-unit dash, and linear easing; derive loop phase from absolute time. Capture at 0, 1, and 2 seconds to verify the intermediate change and the return to the starting frame.