1.0.3 • Published 6 years ago
circle-svg-animation v1.0.3
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:
<script type="text/javascript" src="js.circle-svg-animation.min.js"></script>
Package Managers
# 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
});
Dependencies
jQuery 3.1