Loading

로딩은 데이터를 검색하거나 처리하는 동안 사용자에게 진행중임을 알려주는 컴포넌트 입니다. 사용자가 진행 상황에 대해 시간이 더 빠르게 흐르는 듯한 느낌을 받도록 합니다.

Anatomy

anatomy

  • Container
  • Loading Indicator
  • Animated spinner

Spec

  • Animation

    Animation

    인디케이터를 통해 대기 중임을 시각적으로 제공하며, 시계 방향으로 회전하는 원 애니메이션을 구현합니다. 로딩 애니메이션은 4가지 교보문고 아이덴티티를 상징하는 컬러 원형 모션과 반시계 방향으로 회전하는 스피너로 구성됩니다. 예상 대기 시간이 1초 이상(2~5초 사이)인 경우에만 로딩을 표시하도록 합니다.

  • Angle

    Angle

    스피너 원형의 각도는 90도 기준으로 회전하도록 합니다.

Usage

Do

Do

로딩 인디케이터는 로드 중인 페이지 또는 콘텐츠 중앙에 나타나야 합니다

Don’t

Don’t

한 화면에 여러개의 로딩 인디케이터를 사용하지 않습니다.

© KYOBO BOOK CENTRE교보문고 바로가기