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>
  <progress-bar v-model="progress"/>
</template>
<script>
  export default {
    data () {
      return {
        progress: 66
      }
    }
  }
</script>
<!-- progress-bar-example.vue -->

With label 🔗

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

<template>
  <section>
    <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/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        progress1: 1,
        progress: 66
      }
    }
  }
</script>
<!-- progress-bar-with-label.vue -->

Contextual alternatives 🔗

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

<template>
  <section>
    <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"/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        progress20: 20,
        progress40: 40,
        progress60: 60,
        progress80: 80
      }
    }
  }
</script>
<!-- progress-bar-contextual-alternatives.vue -->

Striped 🔗

Uses a gradient to create a striped effect. Not available in IE9 and below.

<template>
  <section>
    <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/>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        progress20: 20,
        progress40: 40,
        progress60: 60,
        progress80: 80
      }
    }
  }
</script>
<!-- progress-bar-striped.vue -->

Animated 🔗

Animate the stripes right to left. Not available in IE9 and below.

<template>
  <progress-bar v-model="progress" striped active/>
</template>
<script>
  export default {
    data () {
      return {
        progress: 40
      }
    }
  }
</script>
<!-- progress-bar-animated.vue -->

Stacked 🔗

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

<template>
  <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>
</template>
<script>
  export default {
    data () {
      return {
        progress20: 20,
        progress35: 35,
        progress10: 10
      }
    }
  }
</script>
<!-- progress-bar-stacked.vue -->

API Reference 🔗

ProgressBar 🔗

Props 🔗

Slots 🔗

ProgressBarStack 🔗

ProgressBar and ProgressBarStack shared same props.