CoreLoader

비동기 작업의 진행 중 상태를 표시하는 스피너 컴포넌트. Loader로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Loader를 사용하세요.

CoreLoader는 border-right 색상을 달리한 원형 스피너로 로딩 상태를 나타내는 컴포넌트입니다.

7가지 size — xxs, xs, sm, md (기본), lg, xl, xxl
2가지 color — primary (기본), white
ComponentPropsWithoutRef<'div'> 확장 — 추가 HTML 속성 전달 가능

Usage

기본 사용법

<CoreLoader />

크기

<HStack $css={{ gap: '16px', alignItems: 'center' }}>
<CoreLoader size="xxs" />
<CoreLoader size="xs" />
<CoreLoader size="sm" />
<CoreLoader size="md" />
<CoreLoader size="lg" />
<CoreLoader size="xl" />
<CoreLoader size="xxl" />
</HStack>

색상

<HStack $css={{ gap: '16px', alignItems: 'center' }}>
<CoreLoader color="primary" />
<Box $css={{ backgroundColor: 'gray-90', padding: '8px', borderRadius: 'radius-100' }}>
  <CoreLoader color="white" />
</Box>
</HStack>

크기와 색상 조합

<HStack $css={{ gap: '16px', alignItems: 'center' }}>
<CoreLoader size="sm" color="primary" />
<CoreLoader size="lg" color="primary" />
<Box $css={{ backgroundColor: 'gray-90', padding: '8px', borderRadius: 'radius-100' }}>
  <CoreLoader size="lg" color="white" />
</Box>
</HStack>

버튼 내 로딩 상태

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<button disabled style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '8px 16px' }}>
  <CoreLoader size="xs" />
  저장 중...
</button>
</HStack>

Props

Prop

Type

CoreLoaderSize

Prop

Type

CoreLoaderColor

Prop

Type

스타일

Size Variants

Size	Width/Height	Border Width
`xxs`	`8px`	`1.2px`
`xs`	`16px`	`2.5px`
`sm`	`24px`	`3.8px`
`md`	`40px`	`6.45px`
`lg`	`56px`	`9px`
`xl`	`72px`	`11.5px`
`xxl`	`88px`	`14.1px`

Color Variants

Color	border-color	border-right-color
`primary`	`border-default`	`primary[60]`
`white`	`border-default (40% opacity)`	`white`

Animation

keyframe: spinner — rotate(1turn)
duration: 1s, iteration: infinite, timing: linear

마이그레이션 가이드

CoreLoader에서 Loader로 이전하세요.

// Before
<CoreLoader size="md" color="primary" />

// After
<Loader size="md" color="primary" />

CoreLoader prop	Loader 대응
`size`	`size` (동일, 반응형 객체 추가 지원)
`color`	`color`
`className`	`className`
`...props`	`...props` (render prop 추가)

신규 Loader는 render prop을 통해 다형성 렌더링과 $css prop을 추가 지원합니다.

On this page