jQuery Circliful Examples

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

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/css/jquery.circliful.css">
<script src="https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js"></script>
<div id="myStathalf" data-dimension="250" data-text="110%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="110" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>

<div id="myStat" data-dimension="250" data-text="70%" data-info="New Clients" data-width="5" data-fontsize="38" data-percent="70" data-fgcolor="#f00" data-bgcolor="#00f" data-fill="#ddd" data-border="outline" data-bordersize="20"></div>

<div id="myStathalf2" data-dimension="250" data-text="35" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div>

<div id="myStat2" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

<div id="myStat3" data-startdegree="90" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

<div id="myStat4" data-startdegree="180" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

<div id="myStathalf3" data-startdegree="45" data-dimension="250" data-text="50%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="50" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>

CSS

div[data-dimension] {
  float:left;
}

JavaScript

$( document ).ready(function() {
  $('#myStathalf').circliful();
  $('#myStat').circliful();
  $('#myShttp://jsfiddle.net/katalin_2003/k4xL76ox/#tathalf2').circliful();
  $('#myStat2').circliful();
  $('#myStat3').circliful();
  $('#myStat4').circliful();
  $('#myStathalf3').circliful();
});