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" />Props & Slots
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| percentage | The percentage value of the progress bar | number | - | 0 |
| size | The size of the progress bar@default '10em' (equal 80px for a font-size of 16px) | string | - | '10em' |
| duration | Duration of the animation in milliseconds@default 1000 | number | - | 1000 |
| delay | Delay before the animation starts in milliseconds@default 100 | number | - | |
| color | The color of the progress bar | Color | - | undefined |
| autoColor | Auto color based on the count (danger, warning, success)@default false | boolean | - | |
| prefix | Suffix to display next to the number | string | - | undefined |
| suffix | Suffix to display next to the number | string | - | undefined |
| strokeLinecap | The stroke-linecap style@default 'round'@values 'butt', 'round', 'square', 'inherit' | TSIndexedAccessType | - | 'round' |
| strokeWidth | The stroke width@default 6 | TSIndexedAccessType | - | 6 |
| stroke | The stroke color Use this prop to override the gradient color You can use a color name or a color code | TSIndexedAccessType | - | undefined |
| successPercentage | The percentage value of the success level@description The progress circle will be filled with the success color when the percentage is greater than or equal to this value@default 100 | number | - | 100 |
| warningPercentage | The percentage value of the warning level@description The progress circle will be filled with the warning color when the percentage is greater than or equal to this value@default 50 | number | - | 75 |
| dangerPercentage | The percentage value of the danger level@description The progress circle will be filled with the danger color when the percentage is greater than or equal to this value@default 25 | number | - | 50 |
| once | Play the animation only once@default true | boolean | - | 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: "%") |