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

Progress

Previous Next

작업의 완료 진행 상황을 나타내는 표시기를 보여주며, 일반적으로 진행률 막대로 표시됩니다.

Docs API Reference 
<script lang="ts">
  import { onMount } from "svelte";
  import { Progress } from "$lib/components/ui/progress/index.js";
 
  let value = $state(13);
 
  onMount(() => {
    const timer = setTimeout(() => (value = 66), 500);
    return () => clearTimeout(timer);
  });
</script>
 
<Progress {value} max={100} class="w-[60%]" />

설치

pnpm dlx shadcn-svelte@latest add progress

사용법

<script lang="ts">
  import { Progress } from "$lib/components/ui/progress/index.js";
</script>
<Progress value={33} />