Loading & Progress

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

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

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

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

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

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

작업이 진행되는 동안 버튼의 라벨이 작은 스피너로 바뀌거나 스피너가 덧붙습니다.

[적용할 곳]에 버튼 로딩 스테이트(Button Loading State)를 넣어 줘. 스피너 버튼(spinner button), 로딩 버튼(loading button)이라고도 불러.
누르면 버튼이 살짝 눌리고, 라벨이 서서히 사라지면서 작업이 도는 동안 그 자리에 작은 스피너가 보이다가, 끝나면 라벨이 돌아오게 해 줘.
로딩 중에도 버튼 너비는 그대로 두고, 여러 번 눌리지 않게 막고, 처리 중 상태를 스크린 리더에 알려 줘.

고리나 호가 계속 돌면서 무언가를 불러오는 중임을 보여 줍니다.

[적용할 곳]에 서큘러 스피너(Circular Spinner)를 넣어 줘. 스피너(spinner), 스로버(throbber)라고도 불러.
호가 흐린 고리를 따라 일정하게 돌면서 길어졌다 짧아졌다 하고, 부드럽게 끊김 없이 이어지게 해 줘.
회전은 끊김 없이 이어지게 하고, 스크린 리더용 로딩 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.

작업이 진행된 만큼 막대가 왼쪽에서 오른쪽으로 채워집니다.

[적용할 곳]에 프로그레스 바(Determinate Progress Bar)를 넣어 줘. 프로그레스 바 필(progress bar fill), 프로그레스 인디케이터(progress indicator)라고도 불러.
막대가 실제 진행에 맞춰 왼쪽에서 오른쪽으로 채워지고, 값이 바뀔 때마다 부드럽게 이어지며, 옆에 퍼센트를 보여 줘.
현재값·최솟값·최댓값을 갖춘 올바른 프로그레스 바 시맨틱을 써서 스크린 리더가 읽을 수 있게 하고, 채워진 부분이 절대 뒤로 줄어들지 않게 해 줘.

걸리는 시간을 알 수 없을 때 막대 조각이 트랙을 따라 계속 지나갑니다.

[적용할 곳]에 무한 프로그레스 바(Indeterminate Linear Progress)를 넣어 줘. 인디터미닛 프로그레스 바(indeterminate progress bar)라고도 불러.
작업이 얼마나 걸릴지 모르는 동안 짧은 조각이 트랙의 한쪽 끝에서 다른 쪽 끝으로 빠르고 부드럽게 계속 지나가게 해 줘.
조각이 트랙 안으로 완전히 들어왔다가 완전히 빠져나가게 해서 반복 이음매가 보이지 않게 하고, 스크린 리더에는 처리 중인 프로그레스 바로 표시해 줘.

긴 작업이 진행될수록 단계 목록이 하나씩 강조되거나 체크됩니다.

[적용할 곳]에 멀티 스텝 로더(Multi-Step Loader)를 넣어 줘. 스텝 로더(step loader), 체크리스트 로더(checklist loader)라고도 불러.
단계가 위에서 아래로 하나씩 켜지고, 끝날 때마다 작은 체크 표시가 톡 튀어나오게 해 줘. 차분하고 읽기 편한 속도로.
단계는 고정 타이머가 아니라 실제 작업 진행에 맞춰 넘어가게 하고, 완료된 단계를 스크린 리더에 알려 줘.

호가 고리를 따라 늘어나며 완료된 비율을 보여 줍니다.

[적용할 곳]에 프로그레스 링(Progress Ring)을 넣어 줘. 서큘러 프로그레스(circular progress), 레이디얼 프로그레스(radial progress)라고도 불러.
맨 위에서 시작한 호가 고리를 따라 시계 방향으로 늘어나며 완료 비율을 보여 주고, 멈출 때는 부드럽게 감속하면서 가운데 숫자도 함께 올라가게 해 줘.
호와 숫자가 서로 맞게 움직이게 하고, 값은 올바른 프로그레스 바 시맨틱으로 스크린 리더에 전달해 줘.

회색 자리 표시 블록이 은은하게 밝아졌다 어두워지며 로딩 중임을 알려 줍니다.

[적용할 곳]에 펄스 플레이스홀더(Pulse Placeholder)를 넣어 줘. 스켈레톤 펄스(skeleton pulse)라고도 불러.
곧 나올 콘텐츠 모양의 회색 블록들이 다 함께 천천히 밝아졌다 돌아오게 해 줘. 부드럽고 일정한 리듬으로.
자리 표시 블록은 실제 레이아웃에 맞춰서 콘텐츠가 들어올 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 가만히 두어 줘.

회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.

[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.

페이지 이동 중 상단의 얇은 막대가 조금씩 나아가다가 로딩이 끝나면 끝까지 채워집니다.

[적용할 곳]에 탑 로딩 바(Top Loading Bar)를 넣어 줘. 페이지 프로그레스 바(page progress bar)라고도 불러.
상단 가장자리의 얇은 막대가 페이지를 불러오는 동안 처음엔 빠르게 튀어 나갔다가 점점 느려지고, 로딩이 끝나면 끝까지 달려간 뒤 사라지게 해 줘.
로딩이 실제로 끝나기 전에는 절대 끝에 닿지 않게 하고, 페이지 콘텐츠를 가리거나 밀어내지 않게 해 줘.

말풍선 안의 점 세 개가 차례로 깜빡이거나 떠올라, 상대나 AI가 입력 중임을 보여 줍니다.

[적용할 곳]에 타이핑 인디케이터(Typing Indicator)를 넣어 줘. 타이핑 닷(typing dots)이라고도 불러.
상대가 입력하는 동안 작은 채팅 말풍선 안의 점들이 하나씩 차례로 떠오르며 밝아지게 해 줘. 부드럽고 잔잔한 리듬으로.
루프는 끊김 없이 이어지게 하고, 메시지가 도착하면 바로 말풍선을 없애고, 스크린 리더에는 점 대신 짧은 상태 문구를 전해 줘.