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


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


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 stringcentercenterleftright
textYThe vertical position of SVG text stringcentercentertopbottom

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…