Progress

Shows a progress bar.

Examples

Basic progress

Code

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

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

Multiple progress bars in one

Code

<template>
  <Progress :model-value="70">
    <ProgressIndicator :model-value="85" class="bg-primary/20" />
  </Progress>
</template>

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