Vue Circular Progress Bars and Counters Library

VUE CIRCLE COUNTER component creates the angle, colors, stroke width, spacing between dashes, and direction can all be controlled through the properties.

circular progress bar with percentage, progress bar circle codepen, animated circular progress bar, circle progress bar js

How it works

The component creates an SVG element with default width and height of 100% (the outer diameter of the counter). Two dashed strokes are overlaid: the bottom is controlled by stroke and dashCount the top by activeStroke and activeCount. You can reverse to counterclockwise and rotate the starting angle (default is right / 3 o’clock).

How to make use of it:

Install & Download:

# npm
$ npm install vue-circle-counter

#yarn
$ yarn add vue-circle-counter

For the browser

<script src="unpkg.com/[email protected]/dist/circleCounter.umd.min.js"></script>

Properties

prop	description	default	options
`size`	width and height of the element	`10rem`	String
`dashCount`	Total number of dashes	`60`	Natural number
`activeCount`	Number of dashes on top	`10`	Natural number
`strokeWidth`	Bottom stroke as a percentage of the radius	`20`	`0` to `100`
`activeWidth`	Top stroke as a percentage of the radius	`20`	`0` to `100`
`stroke`	The stroke color of the bottom dashes	`lightgrey`	`color`
`activeStroke`	The stroke color of the top dashes	`dodgerblue`	`color`
`dashSpacing`	Fraction of width taken up by space between dashes	`1/4`	`0` to `1`
`rotate`	Degrees rotation for start angle (0 = right)	`-90`	`-360` to `360`
`reverse`	Reverse the direction of counting (true = counter-clockwise)	`false`	`false` or `true`
`text`	Text string to display inside SVG	`""`	String