다른 이름 Skeleton pulse, placeholder-glow
회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.
[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.
다른 이름 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.
[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.
다른 이름 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
밝은 하이라이트가 글자 위를 반복해서 훑고 지나갑니다.
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.
다른 이름 Indeterminate progress bar, Buffer bar
걸리는 시간을 알 수 없을 때 막대 조각이 트랙을 따라 계속 지나갑니다.
[적용할 곳]에 무한 프로그레스 바(Indeterminate Linear Progress)를 넣어 줘. 인디터미닛 프로그레스 바(indeterminate progress bar)라고도 불러.
작업이 얼마나 걸릴지 모르는 동안 짧은 조각이 트랙의 한쪽 끝에서 다른 쪽 끝으로 빠르고 부드럽게 계속 지나가게 해 줘.
조각이 트랙 안으로 완전히 들어왔다가 완전히 빠져나가게 해서 반복 이음매가 보이지 않게 하고, 스크린 리더에는 처리 중인 프로그레스 바로 표시해 줘.