MazCircularProgressBar

MazCircularProgressBar displays a percentage or a progress in an animated ring, with a configurable size, color, duration and content in the center

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

75%0%75%

<script lang="ts" setup>
import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'
</script>

<template>
  <MazCircularProgressBar :percentage="75" suffix="%" />
</template>

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.

75%0%75%

75%0%75%

75%0%75%

75%0%75%

<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.

75075

<MazCircularProgressBar :percentage="75" :duration="5000" />

Color

75075

75075

75075

75075

75075

75075

<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%.

000

25025

50050

1000100

<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.

2/4

<MazCircularProgressBar :percentage="75" :duration="5000" />

Props

Name	Description	Type	Required	Default	Possible values
percentage	The percentage value of the progress bar	number	Yes	-	-
size	The size of the progress bar	``${number}rem|${number}px|${number}em|${number}vw|${number}vh|${number}vmin|${number}vmax|${number}%|${number}ch|${number}cm|${number}mm|${number}in|${number}ex|${number}pc|${number...`	No	"10em"	-
duration	Duration of the animation in milliseconds	number	No	1000	-
delay	Delay before the animation starts in milliseconds	number	No	100	-
color	The color of the progress bar	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	-	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
auto-color	Auto color based on the count (destructive, warning, success)	boolean	No	false	-
prefix	Suffix to display next to the number	string	No	-	-
suffix	Suffix to display next to the number	string	No	-	-
stroke-linecap	The stroke-linecap style	"square" | "butt" | "round" | "inherit"	No	"round"	'square' | 'butt' | 'round' | 'inherit'
stroke-width	The stroke width	Numberish	No	6	-
stroke	The stroke color Use this prop to override the gradient color You can use a color name or a color code	string	No	-	-
success-percentage	The percentage value of the success level - The progress circle will be filled with the success color when the percentage is greater than or equal to this value	number	No	100	-
warning-percentage	The percentage value of the warning level - The progress circle will be filled with the warning color when the percentage is greater than or equal to this value	number	No	75	-
danger-percentage	The percentage value of the danger level - The progress circle will be filled with the danger color when the percentage is greater than or equal to this value	number	No	50	-
once	Play the animation only once	boolean	No	true	-

Slots

Name	Description	Bindings
default	Default slot - Replace the percaentage value	-
prefix	Prefix slot - Add a prefix next to the number (e.g: "$")	-
suffix	Suffix slot - Add a suffix next to the number (e.g: "%")	-