ngx-i24-circular-progress
Version:
A lightweight plugin to render a simple, animated circular progress bar.
106 lines (99 loc) • 11.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class NgxI24CircularProgressService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class NgxI24CircularProgressComponent {
constructor() {
this.option = {
primaryColor: '#0495fc',
secondaryColor: '#191919',
strokeWidth: 2,
dotWidth: 10,
numberColor: '#000',
percentColor: '#000',
textColor: '#000000bf',
text: 'css',
circleRadius: 70,
numberFontSize: '2.5em',
percentFontSize: '0.5em',
textFontSize: '0.75em',
};
this.number = 0;
this.size = '150px';
this.steps = 440;
this.strokeWidth = '2px';
this.dotWidth = '10px';
this.dotTop = '-5px';
this.strokeDashoffset = 0;
}
ngOnChanges() {
this.init();
}
init() {
this.option.primaryColor = this.option.primaryColor ? this.option.primaryColor : '#0495fc';
this.option.secondaryColor = this.option.secondaryColor ? this.option.secondaryColor : '#191919';
this.option.strokeWidth = this.option.strokeWidth ? this.option.strokeWidth : 2;
this.option.dotWidth = this.option.dotWidth ? this.option.dotWidth : 10;
this.option.numberColor = this.option.numberColor ? this.option.numberColor : '#000';
this.option.percentColor = this.option.percentColor ? this.option.percentColor : '#000';
this.option.textColor = this.option.textColor ? this.option.textColor : '#000000bf';
this.option.circleRadius = this.option.circleRadius ? this.option.circleRadius : 70;
this.option.numberFontSize = this.option.numberFontSize ? this.option.numberFontSize : '2.5em';
this.option.percentFontSize = this.option.percentFontSize ? this.option.percentFontSize : '0.5em';
this.option.textFontSize = this.option.textFontSize ? this.option.textFontSize : '0.75em';
this.option.spaceBetweenNumberPercent = this.option.spaceBetweenNumberPercent ? this.option.spaceBetweenNumberPercent : '3px';
this.size = ((this.option.circleRadius * 2) + 10) + 'px';
this.steps = Math.round(6.2857 * this.option.circleRadius);
this.strokeWidth = this.option.strokeWidth + 'px';
this.dotWidth = this.option.dotWidth + 'px';
this.dotTop = '-' + Math.round(this.option.dotWidth / 2) + 'px';
this.strokeDashoffset = this.steps - ((this.steps * this.number) / 100);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NgxI24CircularProgressComponent, isStandalone: false, selector: "ngx-i24-circular-progress", inputs: { option: "option", number: "number" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"percent\"\n [style.--primaryColor]=\"option.primaryColor\"\n [style.--secondaryColor]=\"option.secondaryColor\"\n [style.--strokeWidth]=\"strokeWidth\"\n [style.--dotWidth]=\"dotWidth\"\n [style.--dotTop]=\"dotTop\"\n [style.--numberColor]=\"option.numberColor\"\n [style.--percentColor]=\"option.percentColor\"\n [style.--textColor]=\"option.textColor\"\n [style.--num]=\"number\"\n [style.--steps]=\"steps\"\n [style.--size]=\"size\"\n [style.--numberFontSize]=\"option.numberFontSize\"\n [style.--percentFontSize]=\"option.percentFontSize\"\n [style.--textFontSize]=\"option.textFontSize\"\n [style.--strokeDashoffset]=\"strokeDashoffset\">\n <div class=\"dot\"></div>\n <svg>\n <circle [attr.cx]=\"option.circleRadius\"\n [attr.cy]=\"option.circleRadius\"\n [attr.r]=\"option.circleRadius\"></circle>\n <circle [attr.cx]=\"option.circleRadius\"\n [attr.cy]=\"option.circleRadius\"\n [attr.r]=\"option.circleRadius\"></circle>\n </svg>\n <div class=\"number\">\n <h2>{{number}}\n <span>%</span>\n </h2>\n @if (option.text) {\n <p>{{option.text}}</p>\n }\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}.percent{position:relative;display:inline-block;width:var(--size);height:var(--size)}.percent svg{position:relative;width:var(--size);height:var(--size);transform:rotate(270deg)}.percent svg circle{width:100%;height:100%;fill:transparent;stroke-width:var(--strokeWidth);stroke:var(--secondaryColor);transform:translate(5px,5px)}.percent svg circle:nth-child(2){stroke:var(--primaryColor);stroke-dasharray:var(--steps);stroke-dashoffset:var(--strokeDashoffset);opacity:0;animation:fadeIn 1s linear forwards;animation-delay:1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dot{position:absolute;inset:5px;z-index:10;transform:rotate(calc(3.6deg * var(--num)));animation:alternateDot 1s linear forwards}@keyframes alternateDot{0%{transform:rotate(0)}to{transform:rotate(calc(3.6deg * var(--num)))}}.dot:before{content:\"\";position:absolute;top:var(--dotTop);left:50%;transform:translate(-50%);width:var(--dotWidth);height:var(--dotWidth);border-radius:50%;background:var(--primaryColor);box-shadow:0 0 10px var(--primaryColor),0 0 30px var(--primaryColor)}.number{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;opacity:0;animation:fadeIn 1s linear forwards;animation-delay:1s}.number h2{display:flex;justify-content:center;align-items:center;color:var(--numberColor);font-weight:700;font-size:var(--numberFontSize)}.number h2 span{font-weight:300;color:var(--percentColor);font-size:var(--percentFontSize)}.number p{font-weight:300;letter-spacing:2px;margin-top:5px;text-transform:uppercase;color:var(--textColor);font-size:var(--textFontSize)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-i24-circular-progress', standalone: false, template: "<div class=\"percent\"\n [style.--primaryColor]=\"option.primaryColor\"\n [style.--secondaryColor]=\"option.secondaryColor\"\n [style.--strokeWidth]=\"strokeWidth\"\n [style.--dotWidth]=\"dotWidth\"\n [style.--dotTop]=\"dotTop\"\n [style.--numberColor]=\"option.numberColor\"\n [style.--percentColor]=\"option.percentColor\"\n [style.--textColor]=\"option.textColor\"\n [style.--num]=\"number\"\n [style.--steps]=\"steps\"\n [style.--size]=\"size\"\n [style.--numberFontSize]=\"option.numberFontSize\"\n [style.--percentFontSize]=\"option.percentFontSize\"\n [style.--textFontSize]=\"option.textFontSize\"\n [style.--strokeDashoffset]=\"strokeDashoffset\">\n <div class=\"dot\"></div>\n <svg>\n <circle [attr.cx]=\"option.circleRadius\"\n [attr.cy]=\"option.circleRadius\"\n [attr.r]=\"option.circleRadius\"></circle>\n <circle [attr.cx]=\"option.circleRadius\"\n [attr.cy]=\"option.circleRadius\"\n [attr.r]=\"option.circleRadius\"></circle>\n </svg>\n <div class=\"number\">\n <h2>{{number}}\n <span>%</span>\n </h2>\n @if (option.text) {\n <p>{{option.text}}</p>\n }\n </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}.percent{position:relative;display:inline-block;width:var(--size);height:var(--size)}.percent svg{position:relative;width:var(--size);height:var(--size);transform:rotate(270deg)}.percent svg circle{width:100%;height:100%;fill:transparent;stroke-width:var(--strokeWidth);stroke:var(--secondaryColor);transform:translate(5px,5px)}.percent svg circle:nth-child(2){stroke:var(--primaryColor);stroke-dasharray:var(--steps);stroke-dashoffset:var(--strokeDashoffset);opacity:0;animation:fadeIn 1s linear forwards;animation-delay:1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dot{position:absolute;inset:5px;z-index:10;transform:rotate(calc(3.6deg * var(--num)));animation:alternateDot 1s linear forwards}@keyframes alternateDot{0%{transform:rotate(0)}to{transform:rotate(calc(3.6deg * var(--num)))}}.dot:before{content:\"\";position:absolute;top:var(--dotTop);left:50%;transform:translate(-50%);width:var(--dotWidth);height:var(--dotWidth);border-radius:50%;background:var(--primaryColor);box-shadow:0 0 10px var(--primaryColor),0 0 30px var(--primaryColor)}.number{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;opacity:0;animation:fadeIn 1s linear forwards;animation-delay:1s}.number h2{display:flex;justify-content:center;align-items:center;color:var(--numberColor);font-weight:700;font-size:var(--numberFontSize)}.number h2 span{font-weight:300;color:var(--percentColor);font-size:var(--percentFontSize)}.number p{font-weight:300;letter-spacing:2px;margin-top:5px;text-transform:uppercase;color:var(--textColor);font-size:var(--textFontSize)}\n"] }]
}], propDecorators: { option: [{
type: Input
}], number: [{
type: Input
}] } });
class NgxI24CircularProgressModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressModule, declarations: [NgxI24CircularProgressComponent], imports: [CommonModule], exports: [NgxI24CircularProgressComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NgxI24CircularProgressModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxI24CircularProgressComponent
],
imports: [
CommonModule
],
exports: [
NgxI24CircularProgressComponent
]
}]
}] });
/*
* Public API Surface of ngx-i24-circular-progress
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxI24CircularProgressComponent, NgxI24CircularProgressModule, NgxI24CircularProgressService };
//# sourceMappingURL=ngx-i24-circular-progress.mjs.map