vue3-radial-progress/dist/RadialProgressBar.min.js

A smart and light radial progress bar component for Vue 3.

var RadialProgressBar=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,a,o=[],i=!0,u=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);i=!0);}catch(e){u=!0,a=e}finally{try{i||null==r.return||r.return()}finally{if(u)throw a}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var n=e.defineComponent({props:{diameter:{type:Number,required:!1,default:200},totalSteps:{type:Number,required:!0,default:10},completedSteps:{type:Number,required:!0,default:0},startColor:{type:String,required:!1,default:"#00C58E"},stopColor:{type:String,required:!1,default:"#00E0A1"},innerStrokeColor:{type:String,required:!1,default:"#2F495E"},strokeWidth:{type:Number,required:!1,default:10},innerStrokeWidth:{type:Number,required:!1,default:10},strokeLinecap:{type:String,required:!1,default:"round"},animateSpeed:{type:Number,required:!1,default:1e3},fps:{type:Number,required:!1,default:60},timingFunc:{type:String,required:!1,default:"linear"},isClockwise:{type:Boolean,required:!1,default:!0}},setup:function(t){var r=e.reactive({fx:.99,fy:.5,cx:.5,cy:.5,r:.65}),n="rg-".concat(Math.random().toString(16).substring(2)),a=e.ref(0),o=e.ref(0),i=e.ref(null),u=e.computed((function(){return t.diameter/2})),l=e.computed((function(){return t.diameter-2*t.innerStrokeWidth})),c=e.computed((function(){return Math.PI*l.value})),d=e.computed((function(){return 0===t.totalSteps?0:100/t.totalSteps})),s=e.computed((function(){return d.value*t.completedSteps})),f=e.computed((function(){return 2*Math.PI/t.totalSteps})),p=e.computed((function(){return 100/t.fps})),m=e.computed((function(){return t.animateSpeed/p.value})),y=e.computed((function(){return f.value/m.value})),v=e.computed((function(){return l.value/2})),h=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px")}})),S=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.strokeWidth,"px"),strokeDashoffset:a.value,transition:"stroke-dashoffset ".concat(t.animateSpeed,"ms ").concat(t.timingFunc)}})),g=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.innerStrokeWidth,"px")}})),k=e.computed((function(){return{width:"".concat(l.value,"px")}}));return e.watch((function(){return[t.diameter,t.totalSteps,t.completedSteps,t.strokeWidth]}),(function(){a.value=(100-s.value)/100*c.value*function(){return t.isClockwise?1:-1}(),i.value&&clearInterval(i.value);var e=(t.completedSteps-1)*f.value,n=(o.value-e)/y.value,u=Math.abs(n-m.value)/m.value,l=n<m.value;i.value=setInterval((function(){var t;l&&n>=m.value||!l&&n<m.value?i.value&&clearInterval(i.value):(o.value=e+y.value*n,t=function(e){var t=.5,r=t+t*Math.cos(e),n=t+t*Math.sin(e);return{x:r,y:n}}(o.value),t.x&&t.y&&(r.fx=t.x,r.fy=t.y),n+=l?u:-u)}),p.value)}),{immediate:!0}),{gradientAnimation:i,innerCircleRadius:v,radialGradientId:n,strokeDashoffset:a,innerCircleStyle:k,containerStyle:h,circumference:c,progressStyle:S,currentAngle:o,strokeStyle:g,gradient:r,radius:u}}}),a=["width","height"],o=["id","fx","fy","cx","cy","r"],i=["stop-color"],u=["stop-color"],l=["r","cx","cy","stroke","stroke-dasharray","stroke-linecap"],c=["transform","r","cx","cy","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap"];!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.vrp__wrapper[data-v-6a0cf1f6] {\r\n  position: relative;\n}\n.vrp__inner[data-v-6a0cf1f6] {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  border-radius: 50%;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\n}\r\n"),n.render=function(t,r,n,d,s,f){return e.openBlock(),e.createElementBlock("div",{class:"vrp__wrapper",style:e.normalizeStyle(t.containerStyle)},[e.createElementVNode("div",{class:"vrp__inner",style:e.normalizeStyle(t.innerCircleStyle)},[e.renderSlot(t.$slots,"default")],4),(e.openBlock(),e.createElementBlock("svg",{width:t.diameter,height:t.diameter,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("defs",null,[e.createElementVNode("radialGradient",{id:t.radialGradientId,fx:t.gradient.fx,fy:t.gradient.fy,cx:t.gradient.cx,cy:t.gradient.cy,r:t.gradient.r},[e.createElementVNode("stop",{offset:"30%","stop-color":t.startColor},null,8,i),e.createElementVNode("stop",{offset:"100%","stop-color":t.stopColor},null,8,u)],8,o)]),e.createElementVNode("circle",{r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:t.innerStrokeColor,"stroke-dasharray":t.circumference,"stroke-dashoffset":"0","stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.strokeStyle)},null,12,l),e.createElementVNode("circle",{transform:"rotate(270, "+t.radius+","+t.radius+")",r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:"url('#".concat(t.radialGradientId,"')"),"stroke-dasharray":t.circumference,"stroke-dashoffset":t.circumference,"stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.progressStyle)},null,12,c)],8,a))],4)},n.__scopeId="data-v-6a0cf1f6";var d=function(){var e=n;return e.install=function(t){t.component("RadialProgressBar",e)},e}(),s=Object.freeze({__proto__:null,default:d});return Object.entries(s).forEach((function(e){var r=t(e,2),n=r[0],a=r[1];"default"!==n&&(d[n]=a)})),d}(Vue);