# Progress Circle
URL: /components/progress-circle
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/progress-circle.mdx

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.

## Anatomy

![Progress Circle의 Anatomy 이미지. Circle track과 Progress Indicator로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a1ea1a6c-7bd0-4bbe-9988-286fe28705c5)

Progress Circle은 Circle track과 Progress Indicator로 구성됩니다.

## Properties

### Behavior

![Progress Circle의 Behavior - Indeterminate와 Determinate](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f6c9be3a-8f45-4eb2-8d42-4263ba55f4a6)

Indeterminate는 대기 시간이 얼마나 남은지 모르는 상황일 때 사용하고, 계속해서 회전하는 동작을 가지고 있습니다.

Determinate는 대기 시간이 얼마나 남은지 아는 상황일 때 진행 상황에 맞춰서 원을 채우는 동작을 가지고 있습니다.

### Size

![Progress Circle의 Size - 24, 40](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0f238ba3-76de-48dd-ad03-3453efbca126)

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

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

### Tone

![Progress Circle의 Tone - Neutral, Brand, Static White, Custom](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9e163f37-30bc-422d-a9a6-fba43ac78a63)

Progress Circle은 뒷 배경의 색상 및 로딩 맥락에 따라 Tone을 설정해 사용할 수 있습니다.

### With Overlay

![Progress Circle의 With Overlay 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b6a2edf4-6cb6-498b-8a35-b7cd0c7a199f)

로딩 아이콘이 배경 화면에 묻혀 잘 보이지 않을 때, 반투명한 배경(오버레이)을 추가하면 선명하게 만들 수 있습니다.

## Guidelines

### Progress Circle의 위치

![Progress Circle의 위치 예시 - 전체 화면, 시트/모달 위](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5131d57e-0327-4797-acf5-2459d98d36fd)

![Progress Circle의 위치 예시 - 버튼 내부, Pull to Refresh 내부](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/10b03944-62f7-4dc6-b996-c3a23e4260d3)

Progress Circle의 위치는 로딩 범위를 나타냅니다. 페이지 중앙에 위치할 경우 전체 페이지가 로딩 중임을 의미하며, 이미지 위에 표시될 때는 해당 이미지만 로딩 중임을 나타냅니다.

#### 일반적으로 사용되는 위치

- 전체 화면
- 버튼 내 혹은 인풋 내
- 시트, 모달 위

### 상황에 맞는 Tone 사용하기

![Progress Circle의 다양한 Tone 사용 예시 - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2c7eeb50-42f8-4b5f-bec4-ee42feaceaa6)

![Progress Circle의 다양한 Tone 사용 예시 - Brand](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/19e4444d-8dd1-4fc5-94ca-edbe076d801d)

![Progress Circle의 다양한 Tone 사용 예시 - Static White](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/27d56379-73ec-4ca6-a939-b437fa95d765)

![Progress Circle의 다양한 Tone 사용 예시 - Custom](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ca9bbff8-3c14-41fc-a884-3ee8a8d0de49)

| Tone             | 설명                                                                                                                              |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Neutral**      | 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 자주 사용됩니다.                                                                              |
| **Brand**        | 화면 내에서 중요도가 높고, 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용할 수 있습니다.                                                            |
| **Static White** | 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 주로 사용합니다.                                                                           |
| **Custom**       | 기본으로 지정된 세 가지 색상 규칙에서 벗어나, progress circle이 놓인 배경에 따라 색상이 유연하게 바뀌어야 할 때 사용합니다. 대표적으로 'Ghost button'에서 로딩 상태를 보여줄 때 이 방식을 활용합니다. |

### 콘텐츠 여부에 따라 Overlay 표시 결정하기

![콘텐츠가 있는 경우 Overlay를 표시한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/add327f7-1bb2-46b9-b9b6-75da0beec8c3)

화면에 콘텐츠가 있는 상태에서 로딩이 발생하면 Overlay를 함께 표시합니다.

뒤 영역이 동작 가능한 경우에는 작은 Overlay를 적용하고, 동작 불가 시에는 화면 전체를 덮는 Overlay를 사용합니다.

![콘텐츠가 없는 경우 Overlay를 표시하지 않은 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/334aec7b-d83e-4197-98d6-92c695777f26)

콘텐츠가 없는 첫 로딩에서는 Progress Circle만 화면 중앙에 표시하여 로딩 상태를 보여줍니다.

## Specification

Component spec (JSON): /rootage/components/progress-circle.json