Progress Circle

Indeterminate

프로세스가 진행 중이라는 것을 보여주지만, 얼마나 걸릴지를 알릴 필요가 없을 때 사용합니다.

Determinate

이는 작업의 시작과 끝이 명확하고, 사용자가 작업의 상태를 파악해야 하는 경우에 유용합니다. 예를 들어, 파일 다운로드 혹은 업로드와 같이 사용자가 남은 시간을 예측할 수 있도록 도와줍니다.

Progress Circle은 24, 40으로 두 사이즈를 제공합니다.

주로 전체 페이지 로딩에 40을 사용하고, 특정 요소 안에서 사용하는 경우 24를 사용하고 있습니다.

Neutral

Neutral의 경우 가장 보편적으로 사용되며 다운로드, 업로드, 처리 등과 같이 기능적 역할을 하고, 스타일보다는 로딩 상태의 인식이 더 중요한 경우 자주 사용됩니다.

Brand

Brand의 경우 화면 내에서 중요도가 높고, 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용할 수 있습니다.

피드에서 더 많은 글을 탐색하려고 할 때, 당근 첫 진입시 등과 같은 상황일 때 사용될 수 있습니다.

Static White

Static White의 경우 overlay 레이어 위에서 사용하거나, progress cirle이 잘 표현되지 않을 화면의 경우 사용합니다.

이를 사용할 경우 사용자가 쉽게 인지할 수 있을 만큼 배경이 충분한 대비를 제공하는지 확인합니다.

예를 들어, '구매하기'와 같은 중요한 액션의 경우, 사용자가 구매를 시작한 후 취소할 수 있는 옵션을 제공하면 사용자에게 유연성을 제공할 수 있습니다. 이는 사용자가 작업을 중단하거나 수정할 수 있는 기회를 제공하여 사용자 경험을 개선하는 데 도움이 됩니다.