---
title: "MazCircularProgressBar"
description: "MazCircularProgressBar displays a percentage or a progress in an animated ring, with a configurable size, color, duration and content in the center"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-circular-progress-bar"
---

# MazCircularProgressBar

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

- Package: `maz-ui`
- Import: `import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-circular-progress-bar

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

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

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

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

## Color

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

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

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

## MazCircularProgressBar API

`import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'`

### Props

- `percentage` (`number`, required): The percentage value of the progress bar.
- `size` (`` `${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... ``, default: `"10em"`): The size of the progress bar.
- `duration` (`number`, default: `1000`): Duration of the animation in milliseconds.
- `delay` (`number`, default: `100`): Delay before the animation starts in milliseconds.
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`): The color of the progress bar.
- `auto-color` (`boolean`, default: `false`): Auto color based on the count (destructive, warning, success).
- `prefix` (`string`): Suffix to display next to the number.
- `suffix` (`string`): Suffix to display next to the number.
- `stroke-linecap` (`"square" | "butt" | "round" | "inherit"`, default: `"round"`): The stroke-linecap style.
- `stroke-width` (`Numberish`, default: `6`): The stroke width.
- `stroke` (`string`): The stroke color Use this prop to override the gradient color You can use a color name or a color code.
- `success-percentage` (`number`, default: `100`): 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.
- `warning-percentage` (`number`, default: `75`): 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.
- `danger-percentage` (`number`, default: `50`): 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.
- `once` (`boolean`, default: `true`): Play the animation only once.

### Slots

- `#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: "%")