createProgress

A composable for tracking progress across one or more segments, with percentage computation and indeterminate state detection.

Copy Markdown

Preview Intermediate Jun 29, 2026

Usage

The createProgress composable creates a progress instance backed by createModel. Each segment registers as a model ticket with a ShallowRef<number> value. The total, percent, and indeterminate state are computed reactively from all registered segments.

import { createProgress } from '@vuetify/v0'

const progress = createProgress({ max: 100 })

// Register segments
const first = progress.register(50)
const second = progress.register(25)

progress.total.value    // 75
progress.percent.value  // 75
progress.isIndeterminate.value // false

// Update a segment
first.value.value = 80
progress.total.value    // 105 → clamped to 100
progress.percent.value  // 100

// Convert raw value to percentage
progress.fromValue(50)  // 50

// Unregister
first.unregister()
progress.total.value    // 25

Architecture

createProgress extends createModel with sum-based aggregation:

Each segment is a model ticket whose value is a ShallowRef<number>. All segments stay selected (multiple: true, enroll: true) so selectedValues always reflects the full set. The total sums all segment values and clamps to [min, max]. The percent normalizes the total to 0–100.

Reactivity

Property	Reactive	Notes
`segments`		Computed — sorted list of registered segment tickets
`selectedValues`		Computed — array of current segment values
`total`		Computed — sum of segment values, clamped to [min, max]
`percent`		Computed — total as percentage of range
`isIndeterminate`		Computed — `true` when no segments or all values are 0

Tip

Segment values are ShallowRef Each ticket’s value is a ShallowRef<number>. Updating it (ticket.value.value = 80) triggers recomputation of total and percent automatically.

Examples

File Upload Tracker

A multi-file upload simulator that drives both per-file and aggregate progress bars from a single createProgress instance, with no component layer required. Each click of “Add file” calls progress.register() to create a new segment ticket, then a setInterval increments ticket.value.value at random steps — the total and percent refs on the instance recompute automatically because each segment’s value is a ShallowRef<number>.

The useUpload.ts composable wraps createProgress in domain terms: it owns the timer pool, exposes upload(name) / clear(), re-exports fromValue for percentage formatting, and cleans up all timers on unmount. upload.vue consumes it without knowing anything about the registry internals — it only reads files, percent, and isIndeterminate. This separation is the pattern to follow when you want to share progress state across components via createProgressContext.

isIndeterminate flips to true once all segments are cleared (clear()), which a real progress bar component would use to switch to an indeterminate animation. fromValue normalizes a raw segment value against [min, max] so each file’s bar width is a percentage independent of whatever max you configured.

File	Role
`useUpload.ts`	Composable — wraps createProgress with file-upload semantics, timer management, and cleanup
`upload.vue`	Demo — add files and watch individual + aggregate progress

Idle

FAQ

Discord

Need help? Join our community for support and discussions ↗

API Reference

The following API details are for the createProgress composable.

createProgress

3 functions, 3 options, 12 properties, 29 methods