react-progressbar-cs
Version:
An Progressbar components.
3 lines (2 loc) • 1.09 kB
JavaScript
import e from"react";var t=function(t){var r=t.progress,a=t.type,s=void 0===a?"linear":a,c=t.width,i=void 0===c?200:c,o=t.height,n=void 0===o?20:o,l=t.circleSize,d=void 0===l?120:l,h=t.strokeWidth,m=void 0===h?8:h,g=t.textSize,v=void 0===g?16:g;if("circle"===s){var p=(d-m)/2,f=2*Math.PI*p,x=f-r/100*f;return e.createElement("svg",{width:d,height:d,viewBox:"0 0 ".concat(d," ").concat(d)},e.createElement("circle",{className:"progress-ring-bg",cx:d/2,cy:d/2,r:p,strokeWidth:m}),e.createElement("circle",{className:"progress-ring-fill",cx:d/2,cy:d/2,r:p,strokeWidth:m,strokeDasharray:f,strokeDashoffset:x,transform:"rotate(-90 ".concat(d/2," ").concat(d/2,")")}),e.createElement("text",{x:"50%",y:"50%",textAnchor:"middle",dy:".3em",className:"progress-text",fontSize:v},r,"%"))}return e.createElement("div",{className:"progress-container",style:{width:i,height:n}},e.createElement("div",{className:"progress-bar",style:{width:"".concat(r,"%"),height:n}},e.createElement("span",{className:"progress-text",style:{fontSize:v}},r,"%")))};export{t as default};
//# sourceMappingURL=index.js.map