VsudProgress

The VsudProgress helps you to create a beautiful progress bar.

Demo

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

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

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

Props Information

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

Variants

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

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

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