Docs
Progress Bar
Progress Bar
A progress bar visually showing the percentage of a task completed.
1%
Helper text
Usage
vue
<script setup lang="ts">
import { Progress } from "wedges-vue";
</script>
<template>
<Progress :model-value="33" />
</template>API Reference
Props
| Prop | Type | Default |
|---|---|---|
afterIndicator | string | |
color | 'primary' | 'green' | 'yellow' | 'red' | 'purple' | 'orange' | 'pink' | 'blue' | 'secondary' | null | 'primary' |
description | string | |
disableAnimation | boolean | false |
disabled | boolean | false |
getValueLabel | ((value: number, max: number) => string) | |
helperText | string | |
id | string | |
indicator | string | |
label | string | |
max | number | 100 |
tooltip | string | |
value | number | null | |
variant | 'default' | 'inline' | null | 'default' |
Examples
The following example shows different layout variants.
50%
Helper text
Helper text
50%
Next example shows different color and layout combinations.
50%
27MB of 60MB
100%
60MB of 60MB
Oops, something went wrong
368
211
96
50% (9 sec left)
70%
50%
50% Complete
(650MB/1.12GB) · 17 seconds remaining