Spinner

로딩 상태를 표시하는 인디케이터입니다.

Loading data...

examples/krds/spinner-demo.tsx

import {
  Item,
  ItemContent,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/spinner.json

사용법

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

<Spinner />

커스터마이징

Spinner 컴포넌트를 수정해 기본 스피너 아이콘을 다른 아이콘으로 교체할 수 있습니다.

examples/krds/spinner-custom.tsx

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

components/ui/spinner.tsx

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }

예제

Size

Use the size-* utility class to change the size of the spinner.

examples/krds/spinner-size.tsx

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

export function SpinnerSize() {

Button

버튼에 스피너를 추가해 로딩 상태를 표시합니다. 앞쪽에는 data-icon="inline-start", 뒤쪽에는 data-icon="inline-end"와 함께 <Spinner />를 배치하세요.

examples/krds/spinner-button.tsx

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

Badge

배지에 스피너를 추가해 로딩 상태를 표시합니다. 앞쪽에는 data-icon="inline-start", 뒤쪽에는 data-icon="inline-end"와 함께 <Spinner />를 배치하세요.

SyncingUpdatingProcessing

examples/krds/spinner-badge.tsx

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

Input Group

Validating...

examples/krds/spinner-input-group.tsx

import { ArrowUpIcon } from "lucide-react"

import {

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

examples/krds/spinner-empty.tsx

import { Button } from "@/components/ui/button"
import {
  Empty,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

جاري معالجة الدفع...

١٠٠.٠٠ دولار

examples/krds/spinner-rtl.tsx

"use client"

import * as React from "react"

Sonner Step Indicator