이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Spinner

Previous Next

로딩 상태를 표시하는 데 사용할 수 있는 인디케이터입니다.

결제 처리 중...
$100.00
<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
  import * as Item from "$lib/components/ui/item/index.js";
</script>
 
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
  <Item.Root variant="muted">
    <Item.Media>
      <Spinner />
    </Item.Media>
    <Item.Content>
      <Item.Title class="line-clamp-1">결제 처리 중...</Item.Title>
    </Item.Content>
    <Item.Content class="flex-none justify-end">
      <span class="text-sm tabular-nums">$100.00</span>
    </Item.Content>
  </Item.Root>
</div>

설치

pnpm dlx shadcn-svelte@latest add spinner

사용법

<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
<Spinner />

커스터마이징

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

<script lang="ts">
  import { cn } from "$lib/utils.js";
  import LoaderIcon from "@lucide/svelte/icons/loader";
  import type { ComponentProps } from "svelte";
 
  type Props = ComponentProps<typeof LoaderIcon>;
 
  let { class: className, ...restProps }: Props = $props();
</script>
 
<LoaderIcon
  role="status"
  aria-label="Loading"
  class={cn("size-4 animate-spin", className)}
  {...restProps}
/>

예제

크기

size-* 유틸리티 클래스를 사용하여 스피너의 크기를 변경할 수 있습니다.

<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<div class="flex items-center gap-6">
  <Spinner class="size-3" />
  <Spinner class="size-4" />
  <Spinner class="size-6" />
  <Spinner class="size-8" />
</div>

색상

text-* 유틸리티 클래스를 사용하여 스피너의 색상을 변경할 수 있습니다.

<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<div class="flex items-center gap-6">
  <Spinner class="size-6 text-red-500" />
  <Spinner class="size-6 text-green-500" />
  <Spinner class="size-6 text-blue-500" />
  <Spinner class="size-6 text-yellow-500" />
  <Spinner class="size-6 text-purple-500" />
</div>

버튼

버튼에 스피너를 추가하여 로딩 상태를 표시할 수 있습니다. <Button /> 컴포넌트가 스피너와 텍스트 사이의 간격을 처리합니다.

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<div class="flex flex-col items-center gap-4">
  <Button disabled size="sm">
    <Spinner />
    로딩 중...
  </Button>
  <Button variant="outline" disabled size="sm">
    <Spinner />
    잠시만 기다려주세요
  </Button>
  <Button variant="secondary" disabled size="sm">
    <Spinner />
    처리 중
  </Button>
</div>

배지

배지 안에도 스피너를 사용할 수 있습니다.

동기화 중 업데이트 중 로딩 중
<script lang="ts">
  import { Badge } from "$lib/components/ui/badge/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<div class="flex items-center gap-2">
  <Badge>
    <Spinner />
    동기화 중
  </Badge>
  <Badge variant="secondary">
    <Spinner />
    업데이트 중
  </Badge>
  <Badge variant="outline">
    <Spinner />
    로딩 중
  </Badge>
</div>

입력 그룹

입력 그룹의 <InputGroup.Addon> 안에 스피너를 넣을 수 있습니다.

검증 중... 
<script lang="ts">
  import * as InputGroup from "$lib/components/ui/input-group/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
</script>
 
<div class="flex w-full max-w-md flex-col gap-4">
  <InputGroup.Root>
    <InputGroup.Input placeholder="메시지를 입력하세요..." disabled />
    <InputGroup.Addon align="inline-end">
      <Spinner />
    </InputGroup.Addon>
  </InputGroup.Root>
  <InputGroup.Root>
    <InputGroup.Textarea placeholder="메시지를 입력하세요..." disabled />
    <InputGroup.Addon align="block-end">
      <Spinner /> 검증 중...
      <InputGroup.Button class="ms-auto" variant="default">
        <ArrowUpIcon />
        <span class="sr-only">전송</span>
      </InputGroup.Button>
    </InputGroup.Addon>
  </InputGroup.Root>
</div>

비어있음

요청 처리 중
요청을 처리하는 동안 잠시 기다려주세요. 페이지를 새로고침하지 마세요.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root class="w-full border md:p-6">
  <Empty.Header>
    <Empty.Media variant="icon">
      <Spinner />
    </Empty.Media>
    <Empty.Title>요청 처리 중</Empty.Title>
    <Empty.Description>
      요청을 처리하는 동안 잠시 기다려주세요. 페이지를 새로고침하지 마세요.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button variant="outline" size="sm">취소</Button>
  </Empty.Content>
</Empty.Root>

아이템

<Item.Media> 안에 스피너를 사용하여 로딩 상태를 표시할 수 있습니다.

다운로드 중...

129 MB / 1000 MB

<script lang="ts">
  import * as Item from "$lib/components/ui/item/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { Progress } from "$lib/components/ui/progress/index.js";
</script>
 
<div class="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
  <Item.Root variant="outline">
    <Item.Media variant="icon">
      <Spinner />
    </Item.Media>
    <Item.Content>
      <Item.Title>다운로드 중...</Item.Title>
      <Item.Description>129 MB / 1000 MB</Item.Description>
    </Item.Content>
    <Item.Actions class="hidden sm:flex">
      <Button variant="outline" size="sm">취소</Button>
    </Item.Actions>
    <Item.Footer>
      <Progress value={75} />
    </Item.Footer>
  </Item.Root>
</div>