Component

Spinner

짧고 범위를 알 수 없는 진행 상태를 표시합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

status의 접근 가능한 이름

spinner 크기

Code

import { Spinner } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Spinner label={"프로젝트를 불러오는 중"} size={"md"}/>))
}

Props

@amineslab/ui에서 Spinner를 가져옵니다.

import { Spinner } from '@amineslab/ui'

`Spinner`

HTML <span> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`label*`	`string`	-	status의 접근 가능한 이름입니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	spinner 크기입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Sizes

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { type ControlSize, Spinner } from '@amineslab/ui'

const controlSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly ControlSize[];

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          {controlSizes.map((size) => (<Spinner key={size} label={`불러오는 중 ${size}`} size={size}/>))}
        </ExampleRow>))
}

Inside a button

Button의 loading prop은 버튼 크기에 맞는 로딩 아이콘을 표시합니다.

import { Button } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Button loading loadingLabel="업로드 중">
          업로드
        </Button>))
}

사용 기준

권장하는 사용

화면 문구나 스크린 리더용 label로 기다리는 작업을 알립니다.

피해야 할 사용

긴 작업에는 progress나 구체적인 단계 설명을 사용합니다.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.