Progress Bar

Horizontal progress indicator from 0 to 100. Uses role="progressbar" for full accessibility support.

Progress Variants

Import

import { DsProgressBar } from '@verkview/design-system'

Usage

<template>
  <DsProgressBar :value="taskProgress" aria-label="Task completion" />
</template>

Props

Prop	Type	Default	Description
value	number	required	Progress value, clamped to 0–100
color	string	hsl(var(--info))	Fill color (any CSS color)
size	'sm' | 'md'	'md'	Track height
ariaLabel	string	undefined	Label for screen readers

Sizes

Size Comparison

sm

md

<DsProgressBar :value="60" size="sm" />
<DsProgressBar :value="60" size="md" />

Colors

Custom Colors

<DsProgressBar :value="40" color="#3b82f6" />
<DsProgressBar :value="65" color="#22c55e" />
<DsProgressBar :value="80" color="#f59e0b" />

Accessibility

• role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax attributes.
• Always provide a meaningful ariaLabel so screen readers can announce what is progressing.

<DsProgressBar
  :value="uploadProgress"
  aria-label="File upload progress"
/>

Examples

Task completion

<script setup>
import { computed } from 'vue'

const props = defineProps<{ tasks: { done: boolean }[] }>()

const progress = computed(() => {
  const done = props.tasks.filter(t => t.done).length
  return Math.round((done / props.tasks.length) * 100)
})
</script>

<template>
  <div class="space-y-1">
    <div class="flex justify-between text-xs text-muted-foreground">
      <span>Progress</span>
      <span>{{ progress }}%</span>
    </div>
    <DsProgressBar :value="progress" aria-label="Task completion" />
  </div>
</template>

Upload progress

<template>
  <div class="space-y-2">
    <DsProgressBar
      :value="uploadPercent"
      color="#3b82f6"
      aria-label="Upload progress"
    />
    <p class="text-xs text-muted-foreground">
      Uploading {{ fileName }} — {{ uploadPercent }}%
    </p>
  </div>
</template>

Indeterminate loading

For unknown duration loading states, use DsSpinner instead of a progress bar.