# 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 'src/components'
1

Global usage

Vue.component(Progress.name)
1

For local usage

export default {
  components: {
    [Progress.name]: Progress
  }
}
1
2
3
4
5

# Simple

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

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11

# Colors

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

<script>
  export default {}
</script>
<style>
 .progress{
   margin-top: 20px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# With text

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

<script>
  export default {}
</script>
<style>
 .progress{
   margin-top: 20px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# With custom slot

Almost done 
<template>
 <div>
  <n-progress :value="90" type="success" :height="15">
    Almost done
  </n-progress>
 </div>
</template>

<script>
  export default {}
</script>
<style>
 .progress{
   margin-top: 20px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Progress Props

# Slots

Name Description
label Progress badge/label content
default Default content for progress text

← Radio buttons →