Animated Circle Statistics Plugin With Canvas - Circliful

File Size: 168 KB
Views Total: 53006
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Circle Statistics Plugin With Canvas - Circliful

Circliful is a jQuery and Vanilla JavaScript chart plugin that animates the presentation of your 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 so on. 

The plugin now works as a vanilla JavaScript without jQuery dependency. For jQuer users, download the Tradition Edition and follow the instructions as indroduced in the Demo page.


  • 3 circle types: circle, plain, half
  • Custom text, colors, and icons (Requires Font Awesome)
  • Animate the circle when it comes into view.

How to use it:

1. Create a DIV container for the plugin. You can pass options to the chart by using the data-* attribute , or by passing them in on initialization.

<div id="demo">

2. Download and load the Circliful's JavaScript and CSS files in the HTML page.

<link href="dist/main.css" rel="stylesheet" />
<script src="dist/circliful.js"></script>

3. Initialize the plugin and create a new circle instance as follows:

  percent: 35,
  id: 'demo'

4. Or initialize the plugin via data-* attributes:

<div id="demo"
circliful.newCircleWithDataSet('demo', circleType);

5. Default settings to customize the plugin.


  // container ID
  id: '',

  // or 'half', 'simple'
  type: 'SimpleCircle'

  // additional CSS classes
  additionalCssClasses: {},

  // the percentage of the circle
  percent: 75,

  // shows a point in the circle
  point: false,

  // point size
  pointSize: 60,

  // if the circle should be animated initialy
  animation: true,

  // how fast or slow the animation should be
  // from 0 to 100
  animationStep: 1,

  // applies gradients to foreground
  strokeGradien: [string, string],

  // Font Awesome icon code
  icon: '',

  // info text shown bellow the percentage in the circle  
  text: null,

  // replacs the percentage
  textReplacesPercentage: false,

  // to hide the percentage sign
  noPercentageSign: false,

  // animate circle on scroll into view
  animateInView: false,

  // used shape at the end
  // or 'round'
  strokeLinecap: 'butt',

  // width of the foreground circle
  foregroundCircleWidth: 5,

  // width of the background circle
  backgroundCircleWidth: 15,

  // colors for different percentages
  progressColors: [{percent: 50, color: "green"}],

  // callback
  onAnimationEnd: function(){},

  // start angle
  startAngle: 0



v2.0.17 (2020-06-04)

  • fixed simple circle without animation

v2.0.15 (2020-05-01)

  • added startAngle option.


  • fixed reposition on update


  • fixed 100 percent


  • Rewritten in plain JavaScript


  • Added option for displaying rounded ends


  • Fix invalid percentage after animate circle. In animate function, while non multiple percentages, the percentage variable is declared in invalidly scope and results in undefined.


  • epmty the icon-string variable if no icon is specified, to supress "undefined" strings in SVG-Output.


  • Fix percenatge progress wrong number bug


  • added iconDecoration option


  • fixed animation for multiple bars


  • change color of the circle according to the percentage


  • Fixed: textBelow doesn't work


  • Accessibility improvements


  • readded assign settings by data attributes


  • Allowing for separate styling of number and percent sign


  • Added settings to show decimals in percentage text


  • v1.0.2
  • Fixed half round chart is missing in new version 1.0.0
  • Animation on scroll into view


  • textBelow property added


  • added point circle


  • changed circliful from canvas to svg
  • API update.
  • Added more options.


  • Fixed bu on target param of isAllowed callback.Moved `bgrCircle()` inside `animate()` so that clearRect()` prevents distortion/pixelation of the foreground circle


  • Fixed Circle fill color cannot be set without using data attribute


  • added font awesome v4.1.0
  • added border inline/outline option again

0.1.5 (2014-01-24)

  • Add animation-step option

This awesome jQuery plugin is developed by pguso. For more Advanced Usages, please check the demo page or visit the official website.