Author: | lugolabs |
---|---|
Views Total: | 3,226 views |
Official Page: | Go to website |
Last Update: | June 11, 2018 |
License: | MIT |
Preview:

Description:
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
i try in ie8 and ie9 can’t start, have suggestion?