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