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

로딩 도트Loading Dots

Loading Dots

로딩 도트

다른 이름Also known as · Typing dots loader · 타이핑 점 로더 · Staggered loading dots · 순차 로딩 점 · Three Dot Flow · 세 점 흐름

585

도판Fig. 585. 로딩 도트 · Loading Dots · sine.inOut

재생 속도Speed

나란한 점들이 시간차로 커지거나 위로 뛰고 다시 돌아온다.Dots bounce or pulse with staggered phases.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

상대가 아직 답변을 준비하고 있음을 알려준다.Signals that a reply is still being prepared.

언제 쓰나Use whenUSE WHEN

채팅 답변을 기다릴 때
짧은 비동기 처리를 표시할 때

Use when presenting loading dots 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 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

세 점이 0.15초 차이로 8px 뛰고 돌아온다.

과용 · 나쁜 사례OVERUSE

오류 상태에서도 점을 계속 돌려 응답을 기다리게 한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1.2s	0.84~1.68s	유한 구간을 호스트 시간으로 반복
점 수	3	3~4	짧은 대기 표시
점 시간차	0.15s	0.1~0.2s	왼쪽부터 시작
점프 높이	8px	4~12px	기준 위치에서 위로 이동
이징	sine.inOut	power2.out, power3.out, sine.inOut	움직임의 가속과 감속

GSAP

const dots = gsap.utils.toArray('.dot');
dots.forEach((dot, i) => {
  tl.to(dot, {y:-8, duration:0.45, ease:'sine.inOut'}, i*0.15);
  tl.to(dot, {y:0, duration:0.45, ease:'sine.inOut'}, i*0.15+0.45);
});

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 로딩 도트을 적용해. 1.2초, 점 수 3; 점 시간차 0.15s; 점프 높이 8px, 이징 sine.inOut로 구현해. paused 타임라인으로 seek 가능하게 하고 반복은 유한 구간의 지역 시간으로 계산해.

Apply Loading Dots to <target> in <file>. Use a 1.2s segment with sine.inOut; implement these explicit settings: Dot count: 3, Dot delay: 0.15s, Jump height: 8px. Use a paused, seekable timeline and repeat through local timeline time.

Codex

<파일>의 <대상> 레이어에 로딩 도트을 적용해. 1.2초, 점 수 3; 점 시간차 0.15s; 점프 높이 8px, sine.inOut를 사용하고 0초, 0.6초, 1.2초 캡처로 시작값, 중간 변화, 완료 자세를 확인해. 동일 시점을 두 번 seek해 같은 결과인지 검증해.

Apply Loading Dots to the <target> layer in <file> with Dot count: 3, Dot delay: 0.15s, Jump height: 8px, using the supplied core snippet and a 1.2s segment with sine.inOut. Capture at 0s, 0.6s, and 1.2s to verify the initial pose, intermediate change, and final pose. Seek to the same timestamp twice and confirm identical output.