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="//code.jquery.com/jquery-2.1.4.min.js"></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.

$.fn.drawCircle();

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
startAng:0,        

// the end angle of the arc in degrees       
endAng:360,               

// the radius of the circles
r:90,                   

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

// the fill color of the rail
railFill:'none',            

// the stroke color of the rail
railStrokeColor:'#e4e4e4',        

// the stroke width of the rail
railStrokeWidth:1,            

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

// the path' fill color
pathFill:'none',            

// the path's stroke color
pathStrokeColor:'#16a6b6', 

// the path's stroke width       
pathStrokeWidth:1           

---

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