/circleStats.js

Build a circle stats in pure javascript

Primary LanguageJavaScript

circleStats.js by @IsmaGNU

Create animated beautyful circle stats in pure javascript

Highlights

  • Two circle colors
  • Filling circle with animation
  • Tested on chrome and firefox

Circle configuration

You can customize the circle with these options:

  • canvas - Canvas where you want to draw your circle
  • percentage - [0-100] Percentage to fill
  • speed - Animation speed. Control how fast the circle is filled in
  • background - Circle's background color
  • foreground - Circle's foreground color
  • radius - Circle's radius

The height and width of the circle is canvas width and height

Usage

 <canvas class="circle_canvas" width="116px" height="116px">
var circle = new CircleStat({
    'canvas': document.getElementById("canvas"),
    'percentage': 45,
    'speed': 0.06,
    'background': 'rgb(238,234,229)',
    'foreground': 'rgb(24, 85, 143)',
    'radius': 45
});

Also, you can add a legend inside the circle using html, it looks really nice.

<div class="days">
    <canvas width="116px" height="116px"></canvas>
    <p><span>15</span><strong>Days left</strong></p>
</div>

License

Feel fre to enjoy with the GNU/GPL v3 and above

Please contact me if you're using it you'll make my day :)