1 line
8.7 KiB
JavaScript
1 line
8.7 KiB
JavaScript
|
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("RadialProgressBar",[],e):"object"==typeof exports?exports.RadialProgressBar=e():t.RadialProgressBar=e()}(this,function(){return function(t){function e(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="/dist/",e(0)}([function(t,e,r){"use strict";t.exports=r(5)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={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:"#bbff42"},stopColor:{type:String,required:!1,default:"#429321"},strokeWidth:{type:Number,required:!1,default:10},animateSpeed:{type:Number,required:!1,default:1e3},innerStrokeColor:{type:String,required:!1,default:"#323232"},fps:{type:Number,required:!1,default:60},timingFunc:{type:String,required:!1,default:"linear"}},data:function(){return{gradient:{fx:.99,fy:.5,cx:.5,cy:.5,r:.65},gradientAnimation:null,currentAngle:0,strokeDashoffset:0}},computed:{radius:function(){return this.diameter/2},circumference:function(){return Math.PI*this.innerCircleDiameter},stepSize:function(){return 0===this.totalSteps?0:100/this.totalSteps},finishedPercentage:function(){return this.stepSize*this.completedSteps},circleSlice:function(){return 2*Math.PI/this.totalSteps},animateSlice:function(){return this.circleSlice/this.totalPoints},innerCircleDiameter:function(){return this.diameter-2*this.strokeWidth},innerCircleRadius:function(){return this.innerCircleDiameter/2},totalPoints:function(){return this.animateSpeed/this.animationIncrements},animationIncrements:function(){return 1e3/this.fps},hasGradient:function(){return this.startColor!==this.stopColor},containerStyle:function(){return{height:this.diameter+"px",width:this.diameter+"px"}},progressStyle:function(){return{height:this.diameter+"px",width:this.diameter+"px",strokeWidth:this.strokeWidth+"px",strokeDashoffset:this.strokeDashoffset,transition:"stroke-dashoffset "+this.animateSpeed+"ms "+this.timingFunc}},strokeStyle:function(){return{height:this.diameter+"px",width:this.diameter+"px",strokeWidth:this.strokeWidth+"px"}},innerCircleStyle:function(){return{width:this.innerCircleDiameter+"px"}}},methods:{getStopPointsOfCircle:function(t){for(var e=[],r=0;r<t;r++){var i=this.circleSlice*r;e.push(this.getPointOfCircle(i))}return e},getPointOfCircle:function(t){var e=.5,r=e+e*Math.cos(t),i=e+e*Math.sin(t);return{x:r,y:i}},gotoPoint:function(){var t=this.getPointOfCircle(this.currentAngle);this.gradient.fx=t.x,this.gradient.fy=t.y},changeProgress:function(t){var e=this,r=t.isAnimate,i=void 0===r||r;if(this.strokeDashoffset=(100-this.finishedPercentage)/100*this.circumference,this.gradientAnimation&&clearInterval(this.gradientAnimation),!i)return void this.gotoNextStep();var n=(this.completedSteps-1)*this.circleSlice,s=(this.currentAngle-n)/this.animateSlice,o=Math.abs(s-this.totalPoints)/this.totalPoints,a=s<this.totalPoints;this.gradientAnimation=setInterval(function(){return a&&s>=e.totalPoints||!a&&s<e.totalPoints?void clearInterval(e.gradientAnimation):(e.currentAngle=n+e.animateSlice*s,e.gotoPoint(),void(s+=a?o:-o))},this.animationIncrements)},gotoNextStep:function(){this.currentAngle=this.completedSteps*this.circleSlice,this.gotoPoint()}},watch:{totalSteps:function(){this.changeProgress({isAnimate:!0})},completedSteps:function(){this.changeProgress({isAnimate:!0})},diameter:function(){this.changeProgress({isAnimate:!0})},strokeWidth:function(){this.changeProgress({isAnimate:!0})}},created:function(){this.changeProgress({isAnimate:!1})}}},function(t,e,r){e=t.exports=r(3)(),e.push([t.id,".radial-progress-container{position:relative}.radial-progress-inner{top:0;right:0;bottom:0;left:0;position:absolute;border-radius:50%;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:v
|