vue-circle-counter

Vue compoment to create a circular counter or progress bar in SVG
5,305 16
vue svg circle progress bar counter
Install
npm install vue-circle-counter
Latest Version:3.0.0
Vue:2
License:MIT
Last Updated:Dec 4, 2019
Links: GitHub  ·  npm
Maintainer: royprins

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

Examples of vue-circle-counter

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

Related Packages

vue3-circle-progress

A circular progressbar component for Vue 3, built with SVG and extensively custo...

393,857 41
circle progress bar vue bar circle progress progress vue 3 vue progress vuejs
vue-svg-pan-zoom

Vue component for svg-pan-zoom

59,567
svg vuejs
@jt-icons/icon-vue-components

Vue components of JT Icons collection.

2,961 1
svg icon
@svgv/core

Node.js API to transform SVGs into Vue components.

1,525 4
svg vue
@k-l-lambda/web-widgets

A package contains some utility vue.js components and modules.

831 0
svg midi

Version History

Version Released Vue License
3.0.0 ^2.5.21 MIT
1.0.1 ^2.5.21 MIT