ProgressBar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Example

Default progress bar.

<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.

<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.

<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.

<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.

<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.

<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.