Vue Progress - Material

The MaterialProgress helps you to create a beautiful progress bar.

Demo

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

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

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

Props Information

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

Variants

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

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

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