BootstrapVue Progress

The BootstrapVue progress components can be used to show a user how far along he/she is in a process. These BootstrapVue progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how BootstrapVue Progress bars work.

Example

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60% 
<div class="progress-wrapper">
  <div class="progress-default">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="default"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-primary">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="primary"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-secondary">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="secondary"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="info"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-success">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="success"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-danger">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="danger"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

<div class="progress-wrapper">
  <div class="progress-warning">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <base-progress
                 type="warning"
                 value="60"
                 size="lg">
                 <slot label>
                   da
                 </slot>
  </base-progress>
</div>

Props

PROP NAME TYPE DEFAULT DESCRIPTION
striped Boolean N/A Whether progress is striped
animated Boolean N/A Whether progress is animated (works only with striped prop together)
label String N/A Progress label (shown on the left above progress)
height Number 3 Progress line height
type String default Progress type (e.g danger, primary etc)
showLabel Boolean N/A  
progressClasses Array / String N/A Progress css classes
size String N/A  
value Number N/A Progress value

If you want to see more examples and properties please check the official BootstrapVue Documentation.