Components / Display

Progress

A native progress element for determinate or indeterminate work.

Preview

Install

Run in your project

npx @getweini/cli@latest add progress

Use cases

File transfer

Show known bytes transferred relative to total bytes.

Unknown-duration work

Show that a request is still running when completion cannot be measured.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Progress from './components/ui/progress/Progress.vue'
const uploaded = ref(42)
</script>

<template>
  <Progress :value="uploaded" :max="100" aria-label="Upload progress" />
  <Progress :value="null" aria-label="Preparing upload" />
</template>

More examples

Determinate upload

Use a numeric value and a visible text equivalent.

Determinate upload

<script setup lang="ts">
import { ref } from 'vue'
import Progress from './components/ui/progress/Progress.vue'
const uploaded = ref(64)
</script>

<template>
  <div><p>Uploading files: {{ uploaded }}%</p><Progress :value="uploaded" :max="100" aria-label="File upload" /></div>
</template>

Preparing a report

Pass null until the job exposes a measurable total.

Preparing a report

<script setup lang="ts">
import Progress from './components/ui/progress/Progress.vue'
</script>

<template>
  <div><p>Preparing report…</p><Progress :value="null" aria-label="Preparing report" /></div>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Progress
Name	Type	Default or requirement
`value`	number \| null	indeterminate
`max`	number	100
`size`	sm \| md \| lg	md
`variant`	default \| success \| warning \| destructive	default

Omit value or pass null for indeterminate progress. Supply aria-label or aria-labelledby, and use aria-valuetext when the numeric value does not express the user-facing state.

Implementation notes

Clamp application values to their actual range before showing user-facing percentages.
Switch from indeterminate to determinate only when the denominator is known.

Accessibility and localization

Name every progress indicator; use aria-valuetext when a numeric value does not describe the stage.