Vue Progress - Argon

The ArgonProgress helps you to create a beautiful progress bar.

Demo

1<template>
2  <argon-progress color="success" :percentage="60" />
3</template>
4
5<script>
6import ArgonProgress from "@/components/ArgonProgress.vue";
7export default {
8 components: {
9   ArgonProgress,
10   },
11 };
12</script>

<template>
  <argon-progress color="success" :percentage="60" />
</template>

<script>
import ArgonProgress from "@/components/ArgonProgress.vue";
export default {
 components: {
   ArgonProgress,
   },
 };
</script>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Change `ArgonProgress` progress color.
percentage*	Number		Used to set the progress for `ArgonProgress`. It is a required prop.
variant	'gradient''fill'	fill	Change the `ArgonProgress` background type by using `variant` alongside `color`.

Variants

1<template>
2  <argon-progress percentage="70" variant="fill" color="success" />
3  <argon-progress percentage="70" variant="gradient" color="success" />
4  </template>
5
6<script>
7import ArgonProgress from "@/components/ArgonProgress.vue";
8export default {
9 components: {
10   ArgonProgress,
11   },
12 };
13</script>

<template>
  <argon-progress percentage="70" variant="fill" color="success" />
  <argon-progress percentage="70" variant="gradient" color="success" />
  </template>

<script>
import ArgonProgress from "@/components/ArgonProgress.vue";
export default {
 components: {
   ArgonProgress,
   },
 };
</script>