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

스켈레톤 시머Skeleton Shimmer

Skeleton Shimmer

스켈레톤 시머

다른 이름Also known as · Skeleton shimmer · 스켈레톤 반짝임 · Skeleton Loading · 스켈레톤 로딩 · Placeholder Pulse

588

렌더 추가 예정CLIP COMING스켈레톤 시머Skeleton Shimmer정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 588. 스켈레톤 시머 · Skeleton Shimmer · linear

내용 자리의 옅은 블록 위로 밝은 띠가 지나간다.A bright band travels across muted content placeholders.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

정보가 들어올 위치와 대기 상태를 알려준다.Shows where content will arrive and that loading is in progress.

언제 쓰나Use whenUSE WHEN

카드 데이터를 기다릴 때
불러올 콘텐츠의 배치를 미리 보여 줄 때

Indicate that card data is loading.
Preview the layout of content that is still loading.

과용 주의AvoidAVOID

응답 완료 뒤에도 반복하지 않는다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

상품 이미지와 제목 자리에 옅은 블록을 놓고 빛을 한 번씩 통과시킨다.

과용 · 나쁜 사례OVERUSE

여러 요소에 동시에 적용해 대기 상태와 완료 상태를 구분하기 어렵게 만든다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	1800ms	1260~2520ms	한 주기 기준
밝은 띠 폭	25%	15~35%	내용 블록 너비 기준
띠 불투명도	0.2	0.1~0.3	밝은 그라디언트 레이어

GSAP

.placeholder { position: relative; overflow: hidden; background: #e5e7eb; }
.effect { position: absolute; inset: 0 auto 0 0; width: 25%; opacity: .2; background: linear-gradient(90deg, transparent, white, transparent); animation: effect 1800ms linear infinite; }
@keyframes effect {
  0%{transform:translateX(-100%)} 100%{transform:translateX(400%)}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 스켈레톤 시머을 적용해. 지속 1800ms, 밝은 띠 폭 25%, 띠 불투명도 0.2, 이징 linear으로 위 키프레임을 구현하고 최종 상태를 유지해. 1800ms 주기로 반복하고 응답 완료 때 종료해.

Apply Skeleton Shimmer to <target> in <file>. Implement the provided keyframes with 1800ms duration, band width 25%, band opacity 0.2, easing linear. Repeat every 1800ms and stop when loading finishes.

Codex

<파일>의 <대상> 스타일에 스켈레톤 시머 키프레임을 추가해. 지속 1800ms, 밝은 띠 폭 25%, 띠 불투명도 0.2, 이징 linear을 적용하고 0초·0.9초·1.8초 시점을 캡처해 시작 상태, 중간 변화, 최종 띠 위치를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Skeleton Shimmer keyframes to the styles for <target> in <file> using 1800ms duration, band width 25%, band opacity 0.2, easing linear. Capture at 0, 0.9, and 1.8 seconds to verify the initial state, intermediate motion, and band position. Use fixed keyframes and verify reduced-motion behavior.