circle-progress.vue

116,263 11

vue3 circle progress bar vue 3 progress bar vue progress bar

Install
`npm install circle-progress.vue`
Latest Version:	3.4.1 (Jul 23, 2025)
Vue:	3
License:	MIT
Last Updated:	Jul 23, 2025
Links:	GitHub · npm

Maintainer: mkolsv

Welcome to circle-progress.vue!

Circle Progress Bar

Hi! Highly customizable & lightweight & responsive circular progressbar component for Vue 3, built with SVG and extensively customizable.

npm install --save circle-progress.vue

import { CircleProgressBar } from 'circle-progress.vue';

<CircleProgressBar :value="7" :max="10" />

Please write me, if you need more props :) You can customize your progress bars as you want. For example:

Props	Type	Description	Default
max*	`Number`	Max value	- `(required)`
value*	`Number`	Current value	- `(required)`
size	`Number, String`	Size of the circle	`'124'`
colorFilled	`String`	Circle color if limit exceed	`'#FF5533'`
colorUnfilled	`String`	Circle color if limit not exceed	`'#3BB44A'`
colorBack	`String`	Back circle color	`'#ECEEF1'`
percentage	`BooleaN`	Show percentage	`false`
rounded	`BooleaN`	Rounding the circle line	`false`
animationDuration	`String`	Animation Duration	`'0.5s'`
strokeWidth	`String`	Circle Stroke width	`'5px'`
strokeWidthUnfilled	`String`	Unfilled circle stroke width (if not provided, uses strokeWidth)	`'20px'`
reversedFilling	`Boolean`	Enable reversed filling	`false`
startAngle	`Number`	Allowing to specify an angle in degrees where the fill should begin	`180`

Also you can use slots to throw your custom content. For example:

<CircleProgressBar  
  :value="20"  
  :max="80"  
  percentage  
 rounded>
{{ value }} / {{ max }}
</CircleProgressBar>

If you find this component helpful, consider supporting its development! ☕

Your support helps keep this project alive and continuously improved! 🚀

vue-ins-progress-bar

A vue ins progress bar

10,270 327

vue progress bar loading progress progress bar vue vue ins vue ins loading bar vue ins progress bar vue loading vue loading bar vue loading progress +1

markdown-to-jsx

A very fast and versatile markdown toolchain. AST, React, React Native, SolidJS,...

214,042,213 2,394

vue3 html jsx markdown markdown parser preact react react-native solid solidjs +2

@scalar/use-toasts

display toasts in Vue

24,371,992 16,329

vue3 composable notifcation toast vue

@scalar/use-codemirror

CodeMirror for Vue

21,770,238 16,329

vue3 codemirror composable vue

@scalar/api-reference

Generate beautiful API references from OpenAPI documents

21,031,808 16,329

vue3 component documentation openapi reference spec swagger vue