StorybookGitHub

Progress

Displays an indicator showing the completion progress of a task.

Uploading dataset.csv64%

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/progress.json

Usage

Use progress to show determinate completion of a task, such as a file upload or multi-step form.

<script setup lang="ts">
import { Progress } from "@/components/ui/progress";
</script>

<template>
  <Progress :model-value="66" />
</template>

modelValue accepts a number between 0 and 100 and defaults to 0. Built on reka-ui's Progress.