Indeterminate Linear Progress (무한 프로그레스 바)

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

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

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

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

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

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

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

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

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

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

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

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