Vue Component That Displays The Counter Circular Arc

The VUE ARC COUNTER component creates a counter in a circular arc. Angles, colors, stroke width, spacing between dashes, and direction can be controlled through properties.

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. A starting angle smaller than the ending angle will count clockwise, and vice versa.

You can display a text string to add a value or label, with limited placement options. This can be styled using CSS.

The absolute difference between the end and start angles must always be less than 360 degrees.

Table of Contents

How to make use of it:

Install & Download:

# npm
$ npm install vue-arc-counter

#yarn
$ yarn add vue-arc-counter

Usage

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

Properties

prop	description	default	options
`size`	width and height of the element	`10rem`	String
`dashCount`	Total number of dashes	`21`	Natural number
`activeCount`	Number of dashes on top	`5`	Natural number
`strokeWidth`	Bottom stroke width as a percentage of the radius	`20`	`0` to `100`
`activeWidth`	Top stroke width 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`
`start`	Start angle from the top	`-120`	`-360` to `360`
`end`	End angle from the top	`120`	`-360` to `360`
`text`	Text string to display inside SVG	`""`	String
`textX`	The horizontal position of SVG text string	`center`	`center`, `left`, `right`
`textY`	The vertical position of SVG text string	`center`	`center`, `top`, `bottom`