Skip to content
On this page

ProgressBar

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

NameTypeDefaultRequiredDescription
v-modelNumberCurrent progress (0 ~ 100).
labelBooleanfalseShow label on progress bar.
label-textStringCustom label text.
min-widthBooleanfalseApply a minimum width to the progress bar, useful when showing label and small current value.
typeStringProgress bar type, support success / info / warning / danger. Or you can add custom types.
stripedBooleanfalseApply striped style.
activeBooleanfalseApply active to striped style.

Slots

NameDescription
defaultUse this slot if need stacked progress bar, see example in the code panel above.

ProgressBarStack

ProgressBar and ProgressBarStack shared same props.

Released under the MIT License.