Circle SVG animation

Animated SVG circle counters / progress meters in pure JavaScript. No dependencies.

Install

npm install circle-svg-animation

Use

Import as an ES module:

import SVG from 'circle-svg-animation';

const svg = new SVG('.custom-css-selector');

Or include as a script tag (UMD build):

<script src="dist/circle-svg-animation.umd.cjs"></script>
<script>
  const svg = new CircleSVGAnimation.default('.custom-css-selector');
</script>

Options

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 in ms, 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
});

Development

npm install
npm run dev       # start dev server with hot reload
npm run build     # build library to dist/
npm run preview   # preview production build

Dependencies

None. Pure JavaScript.