uivProgressBar
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Example
Default progress bar.
vue
<template>
<ProgressBar v-model="progress" />
</template>
<script setup>
import { ProgressBar } from 'uiv';
import { ref } from 'vue';
const progress = ref(66);
</script>With label
TIP
To ensure that the label text remains legible even for low percentages, consider use min-width prop.
vue
<template>
<h4>Default Label</h4>
<ProgressBar v-model="progress" label />
<h4>Custom Label</h4>
<ProgressBar
v-model="progress"
label
label-text="Loading......Please wait."
/>
<h4>Minimum Width</h4>
<ProgressBar v-model="progress1" min-width label />
</template>
<script setup>
import { ProgressBar } from 'uiv';
import { ref } from 'vue';
const progress1 = ref(1);
const progress = ref(66);
</script>Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
vue
<template>
<ProgressBar v-model="progress40" type="success" />
<ProgressBar v-model="progress20" type="info" />
<ProgressBar v-model="progress60" type="warning" />
<ProgressBar v-model="progress80" type="danger" />
</template>
<script setup>
import { ProgressBar } from 'uiv';
import { ref } from 'vue';
const progress20 = ref(20);
const progress40 = ref(40);
const progress60 = ref(60);
const progress80 = ref(80);
</script>Striped
Uses a gradient to create a striped effect.
WARNING
Not available in IE9 and below.
vue
<template>
<ProgressBar v-model="progress40" type="success" striped />
<ProgressBar v-model="progress20" type="info" striped />
<ProgressBar v-model="progress60" type="warning" striped />
<ProgressBar v-model="progress80" type="danger" striped />
</template>
<script setup>
import { ProgressBar } from 'uiv';
import { ref } from 'vue';
const progress20 = ref(20);
const progress40 = ref(40);
const progress60 = ref(60);
const progress80 = ref(80);
</script>Animated
Animate the stripes right to left.
WARNING
Not available in IE9 and below.
vue
<template>
<ProgressBar v-model="progress" striped active />
</template>
<script setup>
import { ProgressBar } from 'uiv';
import { ref } from 'vue';
const progress = ref(40);
</script>Stacked
Place multiple <progress-bar-stack> into the same <progress-bar> to stack them.
vue
<template>
<ProgressBar>
<ProgressBarStack v-model="progress35" type="success" />
<ProgressBarStack v-model="progress20" type="warning" striped />
<ProgressBarStack v-model="progress10" type="danger" />
</ProgressBar>
</template>
<script setup>
import { ProgressBar, ProgressBarStack } from 'uiv';
import { ref } from 'vue';
const progress20 = ref(20);
const progress35 = ref(35);
const progress10 = ref(10);
</script>API Reference
ProgressBar
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
v-model | Number | ✔ | Current progress (0 ~ 100). | |
label | Boolean | false | Show label on progress bar. | |
label-text | String | Custom label text. | ||
min-width | Boolean | false | Apply a minimum width to the progress bar, useful when showing label and small current value. | |
type | String | Progress bar type, support success / info / warning / danger. Or you can add custom types. | ||
striped | Boolean | false | Apply striped style. | |
active | Boolean | false | Apply active to striped style. |
Slots
| Name | Description |
|---|---|
default | Use this slot if need stacked progress bar, see example in the code panel above. |
ProgressBarStack
ProgressBar and ProgressBarStack shared same props.