Vue Progress

Bootstrap progress components can be used to show a user how far along he/she is in a process. These Bootstrap 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 Bootstrap 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%

<base-progress :value="60" type="defaults" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="primary" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="secondary" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="info" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="success" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="danger" label="Task completed" showLabel></base-progress>

<base-progress :value="60" type="warning" label="Task completed" showLabel></base-progress>