Progress

Linear progress bars with semantic color variants, multiple sizes, striped and animated styles, and indeterminate mode. Progress bars are fully CSS-driven — set the width via inline style or utility classes and the bar animates smoothly.

Semantic Variants

Primary (default)

Success

Warning

Error

Info

<!-- Primary (default) -->
<div class="vd-progress">
  <div class="vd-progress-bar" style="width: 45%;"></div>
</div>

<!-- Success, Warning, Error, Info -->
<div class="vd-progress-bar vd-progress-success" style="width: 75%;"></div>
<div class="vd-progress-bar vd-progress-warning" style="width: 60%;"></div>
<div class="vd-progress-bar vd-progress-error" style="width: 90%;"></div>
<div class="vd-progress-bar vd-progress-info" style="width: 30%;"></div>

Sizes & Striped

Extra Small (3px)

Small (5px)

Default (8px)

Large (13px)

Extra Large (21px)

60%

Striped & Animated

<!-- Sizes -->
<div class="vd-progress vd-progress-xs">...</div>
<div class="vd-progress vd-progress-sm">...</div>
<div class="vd-progress vd-progress-lg">...</div>
<div class="vd-progress vd-progress-xl">...</div>

<!-- Striped + Animated -->
<div class="vd-progress vd-progress-striped vd-progress-animated">
  <div class="vd-progress-bar" style="width: 75%;"></div>
</div>

<!-- Indeterminate (animated loading bar) -->
<div class="vd-progress vd-progress-indeterminate">
  <div class="vd-progress-bar"></div>
</div>

Indeterminate

Use when the exact progress percentage is unknown.

<!-- Indeterminate (no width needed) -->
<div class="vd-progress vd-progress-indeterminate">
  <div class="vd-progress-bar"></div>
</div>

Multiple Bars & Labeled

Stack multiple bars to show segmented progress.

25%

15%

10%

With percentage label (XL size only)

82%

<!-- Multiple bars -->
<div class="vd-progress vd-progress-lg">
  <div class="vd-progress-bar vd-progress-success"
       style="width: 25%;">25%</div>
  <div class="vd-progress-bar vd-progress-warning"
       style="width: 15%;">15%</div>
  <div class="vd-progress-bar"
       style="width: 10%;">10%</div>
</div>

<!-- Labeled (XL) -->
<div class="vd-progress vd-progress-xl">
  <div class="vd-progress-bar vd-progress-success"
       style="width: 82%;">82%</div>
</div>

CSS Variables

Variable	Default	Description
`--vd-progress-height`	`8px`	Default track height
`--vd-progress-bg`	`var(--vd-bg-tertiary)`	Track background color
`--vd-progress-bar-bg`	`var(--vd-color-primary)`	Default bar fill color
`--vd-progress-border-radius`	`var(--vd-radius-fib-5, 5px)`	Track and bar rounding

API Reference

Usage

<script setup lang="ts">
import { VdProgress } from "@vanduo-oss/vd3";
</script>

<template>
  <VdProgress :value="60" :max="100" label="Uploading" />
  <VdProgress indeterminate label="Working…" />
</template>

CSS Classes

Class	Description
`.vd-progress`	Base track container with rounded overflow.
`.vd-progress-bar`	The colored fill bar. Width controlled via inline style or utility class.
`.vd-progress-success`	Green fill variant.
`.vd-progress-warning`	Amber fill variant.
`.vd-progress-error`	Red fill variant.
`.vd-progress-info`	Cyan fill variant.
`.vd-progress-xs`	Extra small track height (3px).
`.vd-progress-sm`	Small track height (5px).
`.vd-progress-lg`	Large track height (13px).
`.vd-progress-xl`	Extra large track height (21px). Supports text labels inside the bar.
`.vd-progress-striped`	Diagonal stripe overlay on the bar.
`.vd-progress-animated`	Animates the stripes scrolling horizontally.
`.vd-progress-indeterminate`	Animates a partial-width bar back and forth across the track.

Component API (Vue 3)

Prop	Description
`:value`	Current value (default 0).
`:max`	Maximum value (default 100).
`:indeterminate`	Animated indeterminate bar (ignores value).
`:label`	Accessible label / visible text for the bar.

Accessibility

Wrap progress bars in an element with role="progressbar", aria-valuenow, aria-valuemin="0", and aria-valuemax="100".
Provide an aria-label or aria-labelledby describing what is progressing (e.g., "Uploading file.jpg").
For indeterminate bars, omit aria-valuenow and add aria-valuetext="Loading..." instead.
Animations respect prefers-reduced-motion: reduce — stripes and indeterminate motion are disabled.
Dark mode automatically adjusts --vd-progress-bg for sufficient contrast.