Typing Indicator (타이핑 인디케이터)

한 줄로 놓인 점들이 차례로 튀어 오르거나, 흐려지거나, 커졌다 작아집니다.

[적용할 곳]에 바운싱 닷(Bouncing Dots)을 넣어 줘. 닷 로더(dots loader), 쓰리 닷 로더(three-dot loader)라고도 불러.
점들이 가볍고 통통 튀는 리듬으로 하나씩 차례로 뛰어올랐다 내려앉고, 잠깐 쉰 뒤 다시 반복되게 해 줘.
루프는 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.

[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.

글자가 차례로 위아래로 흔들리며 단어 전체에 물결이 흐르는 듯한 느낌을 줍니다.

[적용할 곳]에 웨이비 텍스트(Wavy Text) 효과를 넣어 줘. 텍스트 웨이브(text wave)라고도 불러.
글자가 차례로 위아래로 흔들려서 잔잔하고 부드러운 물결이 단어 속을 계속 흐르게 해 줘.
끊김 없이 반복하고, 스크린 리더에서는 한 단어로 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.

세로 막대들이 서로 엇갈리게 늘었다 줄었다 하며 오디오 이퀄라이저처럼 움직입니다.

[적용할 곳]에 바 로더(Bar Loader (Equalizer)) 로딩 애니메이션을 넣어 줘. bars loader, 오디오 바(audio bars)라고도 불러.
세로 막대 몇 개가 오디오 이퀄라이저처럼 서로 엇갈리게 늘었다 줄었다 하게 해 줘. 경쾌하지만 고른 박자로.
반복이 끊김 없이 이어지게 하고, 스크린 리더용 상태 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

이미지의 작고 흐린 버전이 먼저 자리를 채우고, 원본 이미지가 로드되면 선명해집니다.

[적용할 곳]에 블러 업 플레이스홀더(Blur-Up Placeholder) 이미지 로딩 효과를 넣어 줘. LQIP, 블러 플레이스홀더(blur placeholder)라고도 불러.
이미지의 아주 작고 많이 흐린 버전이 바로 이미지 자리를 채우고, 원본 이미지가 로드되면 부드럽게 꽤 빠르게 선명해지게 해 줘.
이미지의 정확한 크기를 미리 확보해서 로드될 때 아무것도 밀리지 않게 하고, 흐린 가장자리가 틀 밖으로 번지지 않게 잘라 줘.