Creating Animated Circle Graphs with Circles.js and SVG

Circles.js is a lightweight and easy javascript library that make it easy to draw an animated circle graph in SVG with percentage display on your web page. Also can be used as a progress bar & loading bar.

Basic Usage:

Make sure to include circles.js script on your web page. The best practice is to load it at the bottom of your page to reduce the page load time.

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

Create a container for the circular graph.

<div id="canvas">
<div class="circle" id="circles-1"></div>
</div>

Call Circles.create with the following options

Circles.create({
    id:         'circles-1',
    percentage: 43,
    radius:     60,
    width:      10,
    number:     7.13,
    text:       '%',
    colors:     ['#D3B6C6', '#4B253A'],
    duration:   400
})

All the options.

• id – the DOM element that will hold the graph
• percentage – the percentage dictating the smaller circle
• radius – the radius of the circles
• width – the width of the ring (optional, has value 10, if not specified)
• number – the number to display at the centre of the graph (optional, the percentage will show if not specified)
• text – the text to display after the number (optional, nothing will show if not specified)
• colors – an array of colors, with the first item coloring the full circle (optional, it will be `[‘#EEE’, ‘#F00’]` if not specified)
• duration – value in ms of animation duration; (optional, defaults to 500); if `null` is passed, the animation will not run

Changelog:

06/11/2018

• Set the internal value to a very small number to allow for zero values