Animated circle statistic plugin – Circliful for jQuery

Circliful for jQuery – circle statistic plugin.

Animated Circle Statistics Plugin With jQuery and Canvas – Circliful

Circliful is a jQuery chart plugin that animates the presentation of information with good looking circular design, a little similar to the ring chart. Also can be used as a circular timer, progress/loading indicator, pie chart, and more.

The jquery-plugin-circliful plugin key features:

– show Infos as Circle Statistics, no images used
– based on SVG and jQuery
– many options can be set
– fully responsive

Circliful plugin samples
Circliful plugin samples

Sample

HTML:

<div class="row">
  <div class="col-lg-2">
    <div id="test-circle"></div>
  </div>
</div>

JavaScript:

$(document).ready(function() {
  $("#your-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 75
  });
});

Half Circle example:

$("#test-circle5").circliful({
  animationStep: 5,
  foregroundBorderWidth: 5,
  backgroundBorderWidth: 15,
  percent: 80,
  halfCircle: 1,
});

License: MIT

Demo / code

https://jsfiddle.net/9dajqcr1/

GitHub

https://github.com/pguso/jquery-plugin-circliful

See also

Tutorial: A nice reading progress indicator

Ladda – loading indicators for buttons

Generate spinning activity indicators in JavaScript

Cool loading animations with CSS

JavaScript responsive progress bar solution

Generate spinning activity indicators in JavaScript

Animated circular progress bars with jQuery

A responsive jQuery Scatter plot plugin – Scatterplot.js

Enjoy!