ProgressBar

Headless ProgressBar; covers WAI-ARIA progressbar role, React Aria ProgressBar, HTML progress.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ProgressBar } from "@vizejs/ui/progress-bar";

Or copy the source into your project with vize lib pull progress-bar (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Determinate progress bar with a visible label and value text. -->
<script setup lang="ts">
import { ProgressBar } from "@vizejs/ui/progress-bar";
</script>

<template>
  <ProgressBar :value="64" label="Syncing library" value-label="64 of 100 tracks" />
</template>

API

ProgressBar

Source: src/families/feedback/progress-bar/progress-bar.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for progress-bar.vue (@vizejs/ui/progress-bar). Every row is proven by the named mounted-DOM, SSR, runtime-conformance, renderer, type, size, or tree-shaking gate. The legacy @vizejs/ui/progress entry remains a compatibility alias for Progress.

Props

Slots

Expose

Data Attributes

CSS Custom Properties

Parts

Finite numeric limits

Determinate percentages and ratios remain finite when two finite bounds have a difference larger than Number.MAX_VALUE. A signed range from -Number.MAX_VALUE to Number.MAX_VALUE reports 0% at the minimum, 50% at zero, and 100% at the maximum. Only an overflowing difference uses half-scaled arithmetic; ordinary normalization and CSS tokens keep their existing values.

Invalid upper bounds still repair to min + 100. When floating-point precision rounds that addition back to min, the authored finite bounds remain intact. This narrow invalid case reports ratio=0, percent=0, and invalid=true. Completion retains its existing definition: a determinate value at the normalized maximum is complete, including this invalid collapsed range. Indeterminate values remain null, omit aria-valuenow and data-percent, and use zero-valued ratio/percentage CSS hooks.

WAI-ARIA permits equal minimum and maximum bounds. The pure range tests, mounted prop-update test, isolated SSR requests, and progress-bar-wide-range, progress-bar-wide-endpoint, progress-bar-collapsed-positive, and progress-bar-collapsed-negative runtime fixtures cover these limits. Existing CSS, exports, budgets, and known-failure ledger remain unchanged.