JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">300px Height</div>
<div class="one">300px Height</div>
<div id="myStathalf1" data-dimension="250" data-width="30" data-fontsize="38" data-percent="95" data-fgcolor="#fab702" data-bgcolor="#eee" data-type="half" data-icon="fa-task" data-animationstep="0.5"></div>
<div id="myStathalf2" data-dimension="250" data-width="30" data-fontsize="38" data-percent="90" data-fgcolor="#fab702" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div>

CSS

.one, .two {
    height: 300px;
    color: white;
}
.test{
  height:500px;
}
.one { background: black; }
.two { background: green; }

JavaScript

(function(t){t.fn.circliful=function(i){var e=t.extend({startdegree:0,fgcolor:"#556b2f",bgcolor:"#eee",fill:!1,width:15,dimension:200,fontsize:15,percent:50,animationstep:1,iconsize:"20px",iconcolor:"#999",border:"default",complete:null,bordersize:10},i);return this.each(function(){function a(i,e,a){t("<span></span>").appendTo(i).addClass(e).text(s).prepend(l).css({"line-height":a+"px","font-size":h.fontsize+"px"})}function n(i,e){t("<span></span>").appendTo(i).addClass("circle-info-half").css("line-height",h.dimension*e+"px").text(r)}function o(i){t.each(c,function(a,n){h[n]=void 0!=i.data(n)?i.data(n):t(e).attr(n),"fill"==n&&void 0!=i.data("fill")&&(m=!0)})}function d(e){u.clearRect(0,0,g.width,g.height),u.beginPath(),u.arc(x,b,w,z,y,!1),u.lineWidth=h.width+1,u.strokeStyle=h.bgcolor,u.stroke(),m&&(u.fillStyle=h.fill,u.fill()),u.beginPath(),u.arc(x,b,w,-k+T,C*e-k+T,!1),"outline"==h.border?u.lineWidth=h.width+13:"inline"==h.border&&(u.lineWidth=h.width-13),u.strokeStyle=h.fgcolor,u.stroke(),p>M&&(M+=I,requestAnimationFrame(function(){d(Math.min(M,p)/100)},f)),M==p&&S&&i!==void 0&&t.isFunction(i.complete)&&(i.complete(),S=!1)}var s,r,c=["fgcolor","bgcolor","fill","width","dimension","fontsize","animationstep","endPercent","icon","iconcolor","iconsize","border","startdegree","bordersize"],h={},l="",p=0,f=t(this),m=!1;if(f.addClass("circliful"),o(f),void 0!=f.data("text")&&(s=f.data("text"),void 0!=f.data("icon")&&(l=t("<i></i>").addClass("fa "+t(this).data("icon")).css({color:h.iconcolor,"font-size":h.iconsize})),void 0!=f.data("type")?(F=t(this).data("type"),"half"==F?a(f,"circle-text-half",h.dimension/1.45):a(f,"circle-text",h.dimension)):a(f,"circle-text",h.dimension)),void 0!=t(this).data("total")&&void 0!=t(this).data("part")){var v=t(this).data("total")/100;percent=(t(this).data("part")/v/100).toFixed(3),p=(t(this).data("part")/v).toFixed(3)}else void...