Nuxt Progress

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

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>

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>

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

With label

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

Progress Props

PROP NAME TYPE DEFAULT DESCRIPTION
striped Boolean N/A  
showValue Boolean true  
animated Boolean N/A  
label String primary  
valuePosition String left  
height Number 1  
type String default  
size String sm  
value Number N/A  

Progress Slots

SLOT DESCRIPTION
default Progress value slot. By default progress percentage is displayed here