Circular Spinner (서큘러 스피너)
다른 이름 Spinner, Throbber, Circular indeterminate
고리나 호가 계속 돌면서 무언가를 불러오는 중임을 보여 줍니다.
쓰는 곳
버튼, 페이지 로딩
변형
- border spinner
- dashed arc
- dual ring
- orbit dots
- infinity loop
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 서큘러 스피너(Circular Spinner)를 넣어 줘. 스피너(spinner), 스로버(throbber)라고도 불러.
호가 흐린 고리를 따라 일정하게 돌면서 길어졌다 짧아졌다 하고, 부드럽게 끊김 없이 이어지게 해 줘.
회전은 끊김 없이 이어지게 하고, 스크린 리더용 로딩 라벨을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.비슷한 모션
Spin (스핀)
다른 이름 Rotate Loop, Spinner
요소가 일정한 속도로 계속 회전합니다.
쓰는 곳
로딩 스피너
[적용할 곳]에 스핀(Spin) 효과를 넣어 줘. 스피너(spinner), 로테이트 루프(rotate loop)라고도 불러.
요소가 일정하고 고른 속도로 계속 돌게 하고, 회전 사이에 이징은 넣지 마.
루프는 끊김 없이 이어지게 하고, 스피너에 접근성 있는 로딩 레이블을 달고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 느리게 하거나 멈춰 줘.Progress Ring (프로그레스 링)
다른 이름 Circular progress, Radial progress, Animated Circular Progress Bar
호가 고리를 따라 늘어나며 완료된 비율을 보여 줍니다.
쓰는 곳
업로드, 목표, 타이머
[적용할 곳]에 프로그레스 링(Progress Ring)을 넣어 줘. 서큘러 프로그레스(circular progress), 레이디얼 프로그레스(radial progress)라고도 불러.
맨 위에서 시작한 호가 고리를 따라 시계 방향으로 늘어나며 완료 비율을 보여 주고, 멈출 때는 부드럽게 감속하면서 가운데 숫자도 함께 올라가게 해 줘.
호와 숫자가 서로 맞게 움직이게 하고, 값은 올바른 프로그레스 바 시맨틱으로 스크린 리더에 전달해 줘.Button Loading State (버튼 로딩 스테이트)
다른 이름 Spinner button, Loading button, Button spinner, Submit loading state
작업이 진행되는 동안 버튼의 라벨이 작은 스피너로 바뀌거나 스피너가 덧붙습니다.
쓰는 곳
폼 제출, 비동기 작업
[적용할 곳]에 버튼 로딩 스테이트(Button Loading State)를 넣어 줘. 스피너 버튼(spinner button), 로딩 버튼(loading button)이라고도 불러.
누르면 버튼이 살짝 눌리고, 라벨이 서서히 사라지면서 작업이 도는 동안 그 자리에 작은 스피너가 보이다가, 끝나면 라벨이 돌아오게 해 줘.
로딩 중에도 버튼 너비는 그대로 두고, 여러 번 눌리지 않게 막고, 처리 중 상태를 스크린 리더에 알려 줘.끌어 보세요
Pull to Refresh (당겨서 새로고침)
다른 이름 Swipe to refresh
목록을 아래로 당기면 스피너가 나타나고, 손을 떼면 콘텐츠를 다시 불러옵니다.
쓰는 곳
피드, 받은편지함
[적용할 곳]에 당겨서 새로고침(Pull to Refresh) 인터랙션을 넣어 줘. 스와이프 투 리프레시(swipe to refresh)라고도 불러.
목록을 맨 위에서 아래로 당기면 약간의 저항감을 주며 손가락을 따라오고, 당기는 만큼 도는 스피너가 드러나게 해 줘. 손을 떼면 콘텐츠를 다시 불러오는 동안 스피너가 계속 돌다가, 끝나면 목록이 부드럽게 다시 올라가게.
목록이 이미 맨 위까지 스크롤된 상태에서만 시작하고, 키보드와 스크린 리더 사용자를 위해 일반 새로고침 버튼도 함께 둬.Loading & Progress의 다른 모션
Determinate Progress Bar (프로그레스 바)
다른 이름 Progress bar fill, Progress Indicator, Progress bar, Circular progress
작업이 진행된 만큼 막대가 왼쪽에서 오른쪽으로 채워집니다.
쓰는 곳
업로드, 여러 단계 폼
[적용할 곳]에 프로그레스 바(Determinate Progress Bar)를 넣어 줘. 프로그레스 바 필(progress bar fill), 프로그레스 인디케이터(progress indicator)라고도 불러.
막대가 실제 진행에 맞춰 왼쪽에서 오른쪽으로 채워지고, 값이 바뀔 때마다 부드럽게 이어지며, 옆에 퍼센트를 보여 줘.
현재값·최솟값·최댓값을 갖춘 올바른 프로그레스 바 시맨틱을 써서 스크린 리더가 읽을 수 있게 하고, 채워진 부분이 절대 뒤로 줄어들지 않게 해 줘.Indeterminate Linear Progress (무한 프로그레스 바)
다른 이름 Indeterminate progress bar, Buffer bar
걸리는 시간을 알 수 없을 때 막대 조각이 트랙을 따라 계속 지나갑니다.
쓰는 곳
페이지 상단이나 카드 로딩
[적용할 곳]에 무한 프로그레스 바(Indeterminate Linear Progress)를 넣어 줘. 인디터미닛 프로그레스 바(indeterminate progress bar)라고도 불러.
작업이 얼마나 걸릴지 모르는 동안 짧은 조각이 트랙의 한쪽 끝에서 다른 쪽 끝으로 빠르고 부드럽게 계속 지나가게 해 줘.
조각이 트랙 안으로 완전히 들어왔다가 완전히 빠져나가게 해서 반복 이음매가 보이지 않게 하고, 스크린 리더에는 처리 중인 프로그레스 바로 표시해 줘.Multi-Step Loader (멀티 스텝 로더)
다른 이름 Step loader, Checklist loader
긴 작업이 진행될수록 단계 목록이 하나씩 강조되거나 체크됩니다.
쓰는 곳
AI 생성, 온보딩 처리
[적용할 곳]에 멀티 스텝 로더(Multi-Step Loader)를 넣어 줘. 스텝 로더(step loader), 체크리스트 로더(checklist loader)라고도 불러.
단계가 위에서 아래로 하나씩 켜지고, 끝날 때마다 작은 체크 표시가 톡 튀어나오게 해 줘. 차분하고 읽기 편한 속도로.
단계는 고정 타이머가 아니라 실제 작업 진행에 맞춰 넘어가게 하고, 완료된 단계를 스크린 리더에 알려 줘.