Circle SVG animation
Example using Circle SVG animation
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:
Package Managers
# NPM npm install circle-svg-animationUse
Simple use of the plugin initialize it using the constructor function by passing your custom css selector
const svg = '.custom-css-selector';Options Properties
The options, and value, is quite unique and powerful. You can use it like so:
const 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 = '.custom-css-selector' SVGWidth: 100 SVGHeight: 100 innerNumber: 30 speed: 1000;Dependencies
jQuery 3.1