Animated Circle / Arc Generator with jQuery and SVG - SVG Arc Creator

File Size: 6.34 KB
Views Total: 13357
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Circle / Arc Generator with jQuery and SVG - SVG Arc Creator

SVG Arc Creator is a jQuery plugin for rendering animated, SVG based circles / arcs which can be used as loading spinner or progress indicator.

Basic usage:

1. To get started you first need to link to the jQuery library and the SVG Arc Creator plugin

<script src="//"></script>
<script src="src/fun_with_svg_arcs.js"></script>

2. The core function to draw SVG circle arcs on top of a SVG circle.


3. These are the default arguments of the svg drawings, you can use all of them to invoke your own paths.

// the start angle of the arc in degrees

// the end angle of the arc in degrees       

// the radius of the circles

// the color of the rail
railHighlightColor:'rgba(0, 0, 0, 0)',  

// the fill color of the rail

// the stroke color of the rail

// the stroke width of the rail

// the path's hightlight color
pathHiglightColor:'rgba(0, 0, 0, 0.4)', 

// the path' fill color

// the path's stroke color

// the path's stroke width       

This awesome jQuery plugin is developed by davelinke. For more Advanced Usages, please check the demo page or visit the official website.