uiv

# 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>
  <div class="uiv">
    <progress-bar v-model="progress" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress: 66,
    }
  },
}
</script>

# With label

TIP

To ensure that the label text remains legible even for low percentages, consider use min-width prop.

Default Label

66%

Custom Label

Loading......Please wait.

Minimum Width

1%
<template>
  <div class="uiv">
    <h4>Default Label</h4>
    <progress-bar v-model="progress" label />
    <h4>Custom Label</h4>
    <progress-bar
      v-model="progress"
      label
      label-text="Loading......Please wait."
    />
    <h4>Minimum Width</h4>
    <progress-bar v-model="progress1" min-width label />
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress1: 1,
      progress: 66,
    }
  },
}
</script>

# Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<template>
  <div class="uiv">
    <progress-bar v-model="progress40" type="success" />
    <progress-bar v-model="progress20" type="info" />
    <progress-bar v-model="progress60" type="warning" />
    <progress-bar v-model="progress80" type="danger" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress20: 20,
      progress40: 40,
      progress60: 60,
      progress80: 80,
    }
  },
}
</script>

# Striped

Uses a gradient to create a striped effect.

WARNING

Not available in IE9 and below.

<template>
  <div class="uiv">
    <progress-bar v-model="progress40" type="success" striped />
    <progress-bar v-model="progress20" type="info" striped />
    <progress-bar v-model="progress60" type="warning" striped />
    <progress-bar v-model="progress80" type="danger" striped />
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress20: 20,
      progress40: 40,
      progress60: 60,
      progress80: 80,
    }
  },
}
</script>

# Animated

Animate the stripes right to left.

WARNING

Not available in IE9 and below.

<template>
  <div class="uiv">
    <progress-bar v-model="progress" striped active />
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress: 40,
    }
  },
}
</script>

# Stacked

Place multiple <progress-bar-stack> into the same <progress-bar> to stack them.

<template>
  <div class="uiv">
    <progress-bar>
      <progress-bar-stack v-model="progress35" type="success" />
      <progress-bar-stack v-model="progress20" type="warning" striped />
      <progress-bar-stack v-model="progress10" type="danger" />
    </progress-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      progress20: 20,
      progress35: 35,
      progress10: 10,
    }
  },
}
</script>

# API Reference

# ProgressBar (opens new window)

# 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 (opens new window)

ProgressBar and ProgressBarStack shared same props.

← Carousel →