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'

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>
Show Code

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>
Show Code

With text

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

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

With label

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

Progress Props

Progress Slots

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

← Popover →