Press "Enter" to skip to content

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.

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/vue-arc-counter@latest/dist/arcCounter.umd.min.js"></script>

Properties

propdescriptiondefaultoptions
sizewidth and height of the element10remString
dashCountTotal number of dashes21Natural number
activeCountNumber of dashes on top5Natural number
strokeWidthBottom stroke width as a percentage of the radius200 to 100
activeWidthTop stroke width as a percentage of the radius200 to 100
strokeThe stroke color of the bottom dasheslightgreycolor
activeStrokeThe stroke color of the top dashesdodgerbluecolor
dashSpacingFraction of width taken up by space between dashes1/40 to 1
startStart angle from the top-120-360 to 360
endEnd angle from the top120-360 to 360
textText string to display inside SVG""String
textXThe horizontal position of SVG text stringcentercenter, left, right
textYThe vertical position of SVG text stringcentercenter, top, bottom

circular arc counter for vue js, vue arc counter Plugin/Github/Codepen


See Demo And Download

Official Website(snirp): Click Here

This superior jQuery/javascript plugin is developed by snirp. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *