Progress

The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean and minimal.

To use the custom radio buttons you need to import the custom made component: 
import {Progress} from '@/components/index'

Global usage

Vue.component(Progress.name)

For local usage

export default {
  components: {
    [Progress.name]: Progress
  }
}

Simple

60% 
<template>
 <div class="row">
  <div class="col-12">
  <base-progress :value="60"></base-progress>
</div>
 </div>
</template>

<script>
  export default {}
</script>

Colors

60%
60%
60%
60%
60% 
<template>
 <div>
  <base-progress :value="60" type="info"></base-progress>
  <base-progress :value="60" type="success"></base-progress>
  <base-progress :value="60" type="danger"></base-progress>
  <base-progress :value="60" type="warning"></base-progress>
  <base-progress :value="60" type="primary"></base-progress>
 </div>
</template>

<script>
  export default {}
</script>
<style>
 .progress{
   margin-top: 20px;
  }
</style>

With text

60% 
<template>
 <div style="height: 40px;">
  <base-progress :value="60" type="danger" show-value></base-progress>
 </div>
</template>

With label

Label
90%
<base-progress label="Label" :value="90" value-position="right" type="success" :height="15"></base-progress>

Progress Props

Progress Slots

Slot Description
default Progress value slot. By default progress percentage is displayed here

← Popover →