@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 4.08 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/progress",["exports","@angular/core","@angular/common"],r):r(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].progress={}),e.ng.core,e.ng.common)}(this,(function(e,r,t){"use strict";var s=function(){function e(){this.percentage=0,this.height="20px",this.strokeWidth=6,this.isCircle=!1}return e.prototype.ngOnInit=function(){this.isCircle&&this.setCircleProgress()},e.prototype.ngOnChanges=function(e){this.isCircle&&this.setCircleProgress()},e.prototype.setCircleProgress=function(){if(this.isCircle){var e=50-this.strokeWidth/2,r=-e,t=-2*e;this.pathString="M 50,50 m 0,"+r+"\n a "+e+","+e+" 0 1 1 0,"+-t+"\n a "+e+","+e+" 0 1 1 0,"+t;var s=2*Math.PI*e;this.trailPath={strokeDasharray:s+"px "+s+"px",strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},this.strokePath={stroke:this.barbgcolor||null,strokeDasharray:this.percentage/100*s+"px "+s+"px",strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}}},e.decorators=[{type:r.Component,args:[{selector:"d-progress",template:'<div *ngIf="!isCircle" class="devui-progress" [ngStyle]="{ height: height }">\r\n <div\r\n class="devui-progress-bar"\r\n role="progressbar"\r\n aria-valuenow="60"\r\n aria-valuemin="0"\r\n aria-valuemax="100"\r\n [style.background-color]="barbgcolor"\r\n [style.width]="percentage + \'%\'"\r\n ></div>\r\n <span [style.line-height]="height">{{ percentageText }}</span>\r\n</div>\r\n<div *ngIf="isCircle" class="devui-progress-circle">\r\n <svg class="devui-progress-circle " viewBox="0 0 100 100">\r\n <path\r\n class="devui-progress-circle-trail"\r\n fill-opacity="0"\r\n [attr.stroke-width]="strokeWidth"\r\n [ngStyle]="trailPath"\r\n [attr.d]="pathString"\r\n ></path>\r\n <path\r\n class="devui-progress-circle-path"\r\n [attr.d]="pathString"\r\n [attr.stroke-linecap]="\'round\'"\r\n fill-opacity="0"\r\n [attr.stroke]="barbgcolor"\r\n [attr.stroke-width]="percentage ? strokeWidth : 0"\r\n [ngStyle]="strokePath"\r\n ></path>\r\n </svg>\r\n <ng-template\r\n *ngIf="customViewTemplate"\r\n [ngTemplateOutlet]="customViewTemplate"\r\n [ngTemplateOutletContext]="{$implicit: this, percentage:percentage}"\r\n ></ng-template>\r\n <span *ngIf="!customViewTemplate" class="devui-progress-circle-text">{{ percentage }}%</span>\r\n</div>\r\n',styles:[":host{display:block}.devui-progress{position:relative;border-radius:100px;background:#dfe1e6}.devui-progress .devui-progress-bar{width:0;height:100%;box-shadow:inset 0 -1px 0 rgba(41,48,64,.2);-webkit-transition:width .6s;transition:width .6s;border-radius:100px;background-color:#5e7ce0}.devui-progress>span{display:block;white-space:nowrap;color:#fff;text-align:center;position:absolute;left:0;top:0;height:100%;width:100%;font-size:12px}.devui-progress-circle{position:relative}.devui-progress-circle-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:#252b3a;line-height:1;white-space:normal;text-align:center;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.devui-progress-circle-trail{stroke:#dfe1e6}.devui-progress-circle-path{stroke:#5e7ce0}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={percentage:[{type:r.Input}],percentageText:[{type:r.Input}],barbgcolor:[{type:r.Input}],height:[{type:r.Input}],strokeWidth:[{type:r.Input}],isCircle:[{type:r.Input}],customViewTemplate:[{type:r.ContentChild,args:[r.TemplateRef,{static:!1}]}]},e}();var i=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[t.CommonModule],exports:[s],declarations:[s],providers:[]}]}],e}();e.ProgressComponent=s,e.ProgressModule=i,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-progress.umd.min.js.map