디자인시스템

본문 바로가기 메인메뉴 바로가기

이 누리집은 대한민국 공식 전자정부 누리집입니다.

대한적십자사 홈페이지

스피너

스피너는 화면이나 요소의 다양한 처리 상태를 시각적으로 표시한 것으로 화면 전체나 일부 요소에 접근하기 위해 일정 시간 동안 대기해야 함을 사용자에게 안내한다.

컴포넌트명

스피너 (Spinner)

스피너 (Spinner) 스타일 예시

1.경로
식별자가 표시되는 경로로 표현 방식에 따라 시각적으로 경로를 표시하거나 식별자의 운동 경로를 위해 가상으로 설정할 수 있음
2.식별자
경로를 따라 이동하는 시각적 표시기로 상태 정보를 안내함

유형

Spinner

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

Small

코드 보기

가이드

스피너는 처리가 진행 중인 영역 근처에 배치한다. 사용자가 주의를 기울일 것으로 예상되는 위치에 배치해야 한다. 예를 들어 특정 콘텐츠 영역에 대한 데이터가 검색되고 있음을 표시하는 경우 해당 영역에 스피너를 표시한다. 입력폼의 제출 처리 상태를 표시하기 위해서는 제출 버튼 내부에 스피너를 사용할 수 있다.
스피너를 장식용으로 사용하지 않는다. 스피너는 실제 대기 상태가 필요한 경우에 사용해야 한다. 화면이 빠르게 표시될 수 있음에도 불구하고 스피너를 제공하게 되면 오히려 주의가 산만해질 수 있다.