VUE CIRCLE COUNTER

This Vue component creates a circular counter. The angle, colors, strokewidth, spacing between dashes and direction can all be controlled through properties.

Examples

Sample code on codesandbox

Browser example on Codepen

Project setup

With a package manager

# npm
$ npm install vue-circle-counter

#yarn
$ yarn add vue-circle-counter

For the browser

<script src="unpkg.com/vue-circle-counter@latest/dist/circleCounter.umd.min.js"></script>

How it works

The component generates an SVG element with default width and height of 100% (outer diameter of the counter). Two dashed strokes are overlayed: the bottom one controlled by stroke and dashCount and the top one by activeStroke and activeCount. You can reverse the direction to counter-clockwise and rotate the start angle (default is right / 3 o'clock).

Properties

|prop|description|default|options| |:---|---|---|---| |size|width and height of 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|Stroke color of the bottom dashes|lightgrey|color| |activeStroke|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|

License

MIT Open Source License