Loading

데이터를 불러오거나 시스템이 처리 중일 때 사용하여 작업이 진행 중임을 시각적으로 알립니다. 로딩 중에는 사용자의 추가적인 입력을 막아 데이터 충돌이나 중복 요청과 같은 오류를 방지하는 역할을 합니다.

Anatomy

  1. 1Indicator

Variants

Variants

Size

Size 속성으로 크기를 지정할 수 있으며, 항상 가로와 세로가 같은 1:1 비율로 보여집니다.

Usage

Type

Circular: 로드 시간이 짧은 일반적인 상황에서 사용합니다. 버튼 클릭 후의 빠른 피드백, 리스트의 일부 항목 업데이트 등 즉각적인 반응이 필요한 경우에 적합합니다. 필요 시 색상을 변경하여 사용할 수 있습니다.

Duration

로딩이 완료되어 새로운 콘텐츠가 화면에 표시되거나, 사용자가 해당 화면에서 다른 곳으로 이동할 때까지 계속 보입니다.

Placement

콘텐츠를 불러올 영역의 중앙에 배치하는 것을 권장합니다.

Button loading

버튼 내부에 사용하여 버튼의 로딩 상태를 표시할 수 있습니다. 사용자가 버튼을 클릭한 후 시간이 걸리는 작업을 수행하는 동안 Circular 애니메이션을 보여줘, 요청이 처리 중임을 직관적으로 인지시킬 수 있습니다.

How to use

Do

작업이 완료될 때까지 Loading 애니메이션을 계속 표기합니다.

Don’t

즉각 완료되는 작업에서는 불필요하게 사용하지 않습니다.

Customize

Wanted
size
Circular
size
color

© 2026 Wanted Lab, Inc.