Press "Enter" to skip to content

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 add vue-circle-counter

For the browser

<script src=""></script>


sizewidth and height of the element10remString
dashCountTotal number of dashes60Natural number
activeCountNumber of dashes on top10Natural number
strokeWidthBottom stroke as a percentage of the radius200 to 100
activeWidthTop stroke 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
rotateDegrees rotation for start angle (0 = right)-90-360 to 360
reverseReverse the direction of counting (true = counter-clockwise)falsefalse or true
textText string to display inside SVG""String

circular progress bars and counters, vue circle 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.