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.