Legacy
CoreLoader
로더 컴포넌트
Usage
기본 사용법
import { CoreLoader } from '@featuring-corp/components';
<CoreLoader />크기 설정
import { CoreLoader } from '@featuring-corp/components';
<CoreLoader size="xxs" />
<CoreLoader size="xs" />
<CoreLoader size="sm" />
<CoreLoader size="md" />
<CoreLoader size="lg" />
<CoreLoader size="xl" />
<CoreLoader size="xxl" />색상 설정
import { CoreLoader } from '@featuring-corp/components';
<CoreLoader color="primary" />
<CoreLoader color="white" />크기와 색상 조합
import { CoreLoader } from '@featuring-corp/components';
<CoreLoader size="sm" color="primary" />
<CoreLoader size="lg" color="white" />
<CoreLoader size="xl" color="primary" />Props
ComponentPropsWithoutRef<'div'> 타입을 확장한 컴포넌트입니다.
Prop
Type
LoaderSize
Prop
Type
LoaderColor
Prop
Type
스타일
기본 스타일 속성
display:inline-blockborder-radius:radius-fullflex-shrink:0animation:spinner 1s infinite linearborder:${borderWidthVar} solid
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
- Keyframes:
spinner - Duration:
1s - Iteration:
infinite - Timing Function:
linear - Transform:
rotate(1turn)