MazCircularProgressBar
MazCircularProgressBar is a standalone component
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
<template>
<MazCircularProgressBar :percentage="75" suffix="%" />
</template>
<script lang="ts" setup>
import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'
</script>Size
The size of the component can be changed by passing the size prop. The value could be a string in px, em or rem.
<MazCircularProgressBar :percentage="75" suffix="%" size="3em" />
<MazCircularProgressBar :percentage="75" suffix="%" size="100px" />
<MazCircularProgressBar :percentage="75" suffix="%" size="10rem" />
<MazCircularProgressBar :percentage="75" suffix="%" size="15rem" />Duration
The duration of the animation can be changed by passing the duration prop. The value could be a number in milliseconds.
<MazCircularProgressBar :percentage="75" :duration="5000" />Color
The color of the component can be changed by passing the color prop. Should be a valid color in basic colors.
<MazCircularProgressBar :percentage="75" :duration="5000" />Auto-color
The color of the component is automatically according to the percentage. The color will be green if the percentage is egal to 100%, orange if below 100%, and red if below 50%.
<MazCircularProgressBar :percentage="0" auto-color size="9rem" />
<MazCircularProgressBar :percentage="25" auto-color size="9rem" />
<MazCircularProgressBar :percentage="50" auto-color size="9rem" />
<MazCircularProgressBar :percentage="100" auto-color size="9rem" />Slot
Replace the percentage value by a custom slot.
Obviously, the "counter animation" will not work in this case.
<MazCircularProgressBar :percentage="75" :duration="5000" />