스피너

스피너는 화면이나 요소의 다양한 처리 상태를 시각적으로 표시한 것으로 화면 전체나 일부 요소에 접근하기 위해 일정 시간 동안 대기해야 함을 사용자에게 안내한다.

사용 지침

결과 데이터가 도착하기 전 사용자 응답이 보류되는 짧은 비동기 구간에 표시하고, 작업이 1초 이상 지속될 가능성이 있다면 진행률 텍스트나 단계 표시기를 함께 고려합니다.

Loading data..

examples/spinner/SpinnerDefault.tsx

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerDefault() {

examples/spinner/SpinnerWithoutLabel.tsx

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerWithoutLabel() {

Label

examples/spinner/SpinnerWithFormSpinner.tsx

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerWithFormSpinner() {

Loading data..Processing...

examples/spinner/SpinnerMultipleSpinners.tsx

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerMultipleSpinners() {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
id	string	—	—
label	string	로딩 중	—
onClick	MouseEventHandler<HTMLSpanElement>	—	—
showLabel	boolean	false	—
size	"small" \| "medium" \| "large" \| null	—	—
style	CSSProperties	—	—
tabIndex	number	—	—
variant	enum	default	—