Drawing Animated Circle Chart Using SVG And Raphael.js

Preview:

Description:

A tiny JavaScript library which takes advantage of the Raphael.js library to draw animated, configurable, SVG-based, circular ring chart / progress indicator on the webpage.

How to use it:

Include the necessary Raphael.js library on the webpage.

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>

Download and include the core JavaScript file circle-chart.js at the bottom of the webpage.

<script src="js/circle-chart.js"></script>

Wrap the percentage value you wan to present into a DIV element as follows:

<div class="circle-chart circle-chart--with-track">
  60%
</div>

Render a circle chart in the webpage:

var el = document.querySelector('.circle-chart--with-track');
var demo = new CircleChart(el, { /* options here */ });

Options and defaults.

stroke:         20,
maxVal:         100,
colour:         '#394c7c',
animationSpeed: 4000,
edgeWidth:      0,
edgeGap:        undefined,
edgeColour:     undefined,
trackColour:    '#bec3ce'