1. 정의
- 데이터 검색/불러오기 등 사용자의 요청사항이 처리 중임을 알려주는 요소
2. 유형
2-1. 베이직 로딩
2-2. 로딩 바
3. 구성 옵션
3-1. 인디케이터
대기 중임을 시각적으로 표현. 로딩 완료 시까지 반복행동하며 로딩 완료 시 사라짐
3-2. 레이블
인디케이터 하단에 대기 중임을 알리는 문구 제공 (ex.'로딩 중', '잠시만 기다리세요')
3-3. 로딩 바 레이블 (선택 사항)
로딩바 유형의 로더 사용 시 필요한 경우 레이블 사용
베이직 로딩 레이블과 같이 수행 중인 작업에 대한 문구를 제공 (ex. Loading data...)
3-4. 진행률
진행률에 대한 자세한 정보 제공 (ex. 60%, 2 of 8)
단 진행률이 불확실한 경우에는 표시하지 않기
3-5. 진행률 표시 줄
진행 상태를 시각적으로 표시
진행률을 계산할 수 있는 경우 1번처럼 좌>우측으로 채워지는 형태로 표시
완료 시간을 알 수 없는 경우 2번처럼 좌>우측으로 일정한 크기의 표시줄이 반복해서 지나가는 형태로 표시
4. 사용 규칙
4-1. 주어진 영역에 맞게 제공
세로 영역이 좁은 경우에는 바 형태의 로더가 적합 (ex. 테이블, 카드 등)
전체 페이지나 매우 작은 영역, 특히 진행률을 알 수 없는 경우에는 원형 로더를 권장
4-2. 로딩 완료 시 자동으로 사라짐
로딩 완료 시 로딩 인디케이터가 자동으로 사라지도록 함
로딩 실패 시에는 로딩 실패 원인을 사용자에게 알리는 메시지나 팝업을 노출해야 함
4-3. 문구(레이블)와 함께 표현 가능
인디케이터 하단에 대기 중임을 표시하는 문구(레이블)를 함께 표현할 수 있음 (ex. '로딩 중, '잠시만 기다리세요')
4-4. 특정 항목에 사용 시 축소하여 사용 가능
페이지의 특정 항목에 로딩이 필요한 경우 로딩 인디케이터를 축소해 사용할 수 있음
(ex. 리스트에서 이미지 여러개 로딩하는 경우 각 이미지 영역에 사용 가능)
5. 배치
페이지 전체에 배치하는 경우 가운데에 배치
축소해서 사용하는 경우 해당 항목의 좌??측??에 배치???????
6. 스타일
6-1. 크기
로딩 크기는 상황에 따라 아래 형태 또는 크기에서 선택해 사용
gif 또는 이미지 시퀀스를 활용하며 상세 간격과 크기는 아래의 규칙을 참고
6-2. 컬러
6-3. 사용 예시
- 전체 영역에서 사용하는 경우
- 파일 업로드 시 다른 컴포넌트에 포함되어 사용되는 경우
7. 구현
필요한 개념
