Progress Circle

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

Figma

Done

iOS

Done

Android

Done

개요

옵션 테이블

속성	값	기본값
size	40, 24	40
tone	neutral, brand, static white	neutral
indeterminate	true, false

스펙

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

Last updated on

Page Banner

페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.

Reaction Button

사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.

On this page

개요 옵션 테이블 스펙