Just copy circle-svg-animation.js or circle-svg-animation.min.js to your js files directory and add a link before your closing <body> tag:
<script type="text/javascript" src="js.circle-svg-animation.min.js"></script># NPM
npm install circle-svg-animation###Use Simple use of the plugin initialize it using the constructor function by passing your custom css selector
const svg = new SVG('.custom-css-selector');####Options Properties The options, and value, is quite unique and powerful. You can use it like so:
const svg = new SVG('.custom-css-selector', {svgOptions}, {svgCircleOptions}, {innerNumberStyles});-
svgOptions
- SVGWidth - svg circle width, default 200px
- SVGHeight - svg circle height, default 200px
- innerNumber - svg circle inner counter number, default 75
- speed - animation speed, default 2000
-
svgCircleOptions
- strokeColor - svg circle color, default #006363
- strokeWidth - svg circle width, default 20px
- circleCx - svg circle X coordinate of the center of the circle, default 110
- circleCy - svg circle Y coordinate of the center of the circle, default 110
- circleR - svg circle radius default 100
-
innerNumberStyles
- color - svg inner counter text color , default the same as svg circle color
- fontWeight - svg inner counter font weight , default 800
- fontSize - svg inner counter text font-size , default 50px
####Example
const svg = new SVG('.custom-css-selector', {
SVGWidth: 100,
SVGHeight: 100,
innerNumber: 30,
speed: 1000
});jQuery 3.1