MazCircularProgressBar

MazCircularProgressBar is a standalone component

Basic usage

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

75%75%

75%75%

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

7575

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

7575

7575

7575

7575

7575

7575

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

00

2525

5050

100100

<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	undefined	-
size	The size of the progress bar	string	No	10em' (equal 80px for a font-size of 16px)	-
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	MazColor	No	undefined	-
auto-color	Auto color based on the count (destructive, warning, success)	boolean	No	false	-
prefix	Suffix to display next to the number	string	No	undefined	-
suffix	Suffix to display next to the number	string	No	undefined	-
stroke-linecap	The stroke-linecap style	Native type	No	round	butt', 'round', 'square', 'inherit
stroke-width	The stroke width	Native type	No	6	-
stroke	The stroke color Use this prop to override the gradient color You can use a color name or a color code	Native type	No	undefined	-
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	50	-
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	25	-
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: "%")