Progress Circle

Anatomy

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

Properties

Behavior

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

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

Size

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

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

Tone

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

With Overlay

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

Guidelines

Progress Circle의 위치

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

일반적으로 사용되는 위치

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

상황에 맞는 Tone 사용하기

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

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

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

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

Progress Circle V3 변경점

• Spinner가 Progress Circle의 Indeterminate로 바뀌었어요.
• 진행 상황을 표현할 수 있는 Progress Circle의 Determinate가 추가됐어요.
• 다양한 배경 케이스에 맞게 컬러를 변경해서 쓸 수 있는 Custom Tone을 추가했어요.

Specification

size=40

상태	슬롯	속성	값
enabled	root	size	$dimension.x10
		thickness	5px

size=24

상태	슬롯	속성	값
enabled	root	size	$dimension.x6
		thickness	3px

indeterminate=false

상태	슬롯	속성	값
enabled	range	lengthDuration	300ms
		lengthTimingFunction	cubic-bezier(0, 0, 0.15, 1)

indeterminate=true

상태	슬롯	속성	값
enabled	range	lengthDuration	1.2s
		rotateDuration	1.2s
		headTimingFunction	cubic-bezier(0.35, 0, 0.65, 1)
		tailTimingFunction	cubic-bezier(0.35, 0, 0.65, 0.6)
		rotateTimingFunction	cubic-bezier(0.35, 0.25, 0.65, 0.75)

tone=neutral

상태	슬롯	속성	값
enabled	track	color	$color.palette.gray-200
	range	color	$color.palette.gray-500

tone=brand

상태	슬롯	속성	값
enabled	track	color	$color.palette.carrot-200
	range	color	$color.bg.brand-solid

tone=staticWhite

상태	슬롯	속성	값
enabled	track	color	$color.palette.static-white-alpha-300
	range	color	$color.palette.static-white