Vue Progress - Material

The MaterialProgress helps you to create a beautiful progress bar.

Demo

<script setup>
// Vue Material Kit 2 component
import MaterialProgress from "@/components/MaterialProgress.vue";
</script>
<template>
  <MaterialProgress  color="success" :value="60" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialProgress from "@/components/MaterialProgress.vue";
4</script>
5<template>
6  <MaterialProgress  color="success" :value="60" />
7</template>

Props Information

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

Variants

<script setup>
// Vue Material Kit 2 component
import MaterialProgress from "@/components/MaterialProgress.vue";
</script>
<template>
  <MaterialProgress color="info" :value="60" />
  <MaterialProgress variant="gradient" color="info" :value="60" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialProgress from "@/components/MaterialProgress.vue";
4</script>
5<template>
6  <MaterialProgress color="info" :value="60" />
7  <MaterialProgress variant="gradient" color="info" :value="60" />
8</template>