Skip to main content

​
Overview

The Animated Circular Progress Bar displays a circular gauge with animated progress visualization and optional percentage display.

​
Usage

<template>
  <AnimatedCircularProgressBar
    :value="75"
    :max="100"
    gaugePrimaryColor="rgb(79 70 229)"
    :showPercentage="true"
  />
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
classstring-The class to be applied to the component.
maxnumber100The maximum value of the gauge.
minnumber0The minimum value of the gauge.
valuenumber0The current value of the gauge.
gaugePrimaryColorstringrgb(79 70 229)The primary color of the gauge.
gaugeSecondaryColorstringrgba(0, 0, 0, 0.1)The secondary color of the gauge.
circleStrokeWidthnumber10The width of the circle progress bar.
showPercentagebooleantrueShow the value inside the circle
durationnumber1The duration of the animation (in seconds).

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us