(function(a) {
  a.fn.circliful = function(b,d) {
    var c = a.extend({
      fgcolor: "#556b2f",bgcolor: "#eee",fill: false,width: 15,dimension: 200,fontsize: 15,percent: 50,animationstep: 1,iconsize: "20px",iconcolor: "#999",border: "default",complete: null
    },b);
    return this.each(function() {
      var w = ["fgcolor","bgcolor","fill","width","dimension","fontsize","animationstep","endPercent","icon","iconcolor","iconsize","border"];
      var f = {};
      var F = "";
      var n = 0;
      var t = a(this);
      var A = false;
      var v,G;
      t.addClass("circliful");
      e(t);
      if (t.data("text") != undefined) {
        v = t.data("text");
        if (t.data("icon") != undefined) {
          F = a("<i></i>").addClass("fa " + a(this).data("icon")).css({
            color: f.iconcolor,"font-size": f.iconsize
          })
        }
        if (t.data("type") != undefined) {
          j = a(this).data("type");
          if (j == "half") {
            s(t,"circle-text-half",(f.dimension / 1.45))
          } else {
            s(t,"circle-text",f.dimension)
          }
        } else {
          s(t,f.dimension)
        }
      }
      if (a(this).data("total") != undefined && a(this).data("part") != undefined) {
        var I = a(this).data("total") / 100;
        percent = ((a(this).data("part") / I) / 100).toFixed(3);
        n = (a(this).data("part") / I).toFixed(3)
      } else {
        if (a(this).data("percent") != undefined) {
          percent = a(this).data("percent") / 100;
          n = a(this).data("percent")
        } else {
          percent = c.percent / 100
        }
      }
      if (a(this).data("info") != undefined) {
        G = a(this).data("info");
        if (a(this).data("type") != undefined) {
          j = a(this).data("type");
          if (j == "half") {
            D(t,0.9)
          } else {
            D(t,1.25)
          }
        } else {
          D(t,1.25)
        }
      }
      a(this).width(f.dimension + "px");
      var i = a("<canvas></canvas>").attr({
        width: f.dimension,height: f.dimension
      }).appendTo(a(this)).get(0);
      var g = i.getcontext("2d");
      var r = i.width / 2;
      var q = i.height / 2;
      var C = f.percent * 360;
      var H = C * (Math.PI / 180);
      var l = i.width / 2.5;
      var B = 2.3 * Math.PI;
      var z = 0;
      var E = false;
      var o = f.animationstep === 0 ? n : 0;
      var p = Math.max(f.animationstep,0);
      var u = Math.PI * 2;
      var h = Math.PI / 2;
      var j = "";
      var k = true;
      if (a(this).data("type") != undefined) {
        j = a(this).data("type");
        if (j == "half") {
          B = 2 * Math.PI;
          z = 3.13;
          u = Math.PI * 1;
          h = Math.PI / 0.996
        }
      }

      function s(J,x,y) {
        a("<span></span>").appendTo(J).addClass(x).text(v).prepend(F).css({
          "line-height": y + "px","font-size": f.fontsize + "px"
        })
      }

      function D(y,x) {
        a("<span></span>").appendTo(y).addClass("circle-info-half").css("line-height",(f.dimension * x) + "px")
      }

      function e(x) {
        a.each(w,function(y,J) {
          if (x.data(J) != undefined) {
            f[J] = x.data(J)
          } else {
            f[J] = a(c).attr(J)
          }
          if (J == "fill" && x.data("fill") != undefined) {
            A = true
          }
        })
      }

      function m(x) {
        g.clearRect(0,i.width,i.height);
        g.beginPath();
        g.arc(r,q,l,z,B,false);
        g.lineWidth = f.width + 1;
        g.strokeStyle = f.bgcolor;
        g.stroke();
        if (A) {
          g.fillStyle = f.fill;
          g.fill()
        }
        g.beginPath();
        g.arc(r,-(h),((u) * x) - h,false);
        if (f.border == "outline") {
          g.lineWidth = f.width + 13
        } else {
          if (f.border == "inline") {
            g.lineWidth = f.width - 13
          }
        }
        g.strokeStyle = f.fgcolor;
        g.stroke();
        if (o < n) {
          o += p;
          requestAnimationFrame(function() {
            m(Math.min(o,n) / 100)
          },t)
        }
        if (o == n && k && typeof(b) != "undefined") {
          if (a.isFunction(b.complete)) {
            b.complete();
            k = false
          }
        }
      }
      m(o / 100)
    })
  }
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circlestat circliful" data-dimension="190" data-width="6" data-fontsize="12" data-percent="50" data-fgcolor="#fff" data-bgcolor="rgba(51,51,0)" style="width: 190px;">
  <canvas style="width: 190px; height:190px;"></canvas>
</div>

<script type="text/javascript">
  $(function() {
    $('.circlestat').circliful();
  });
</script>