ngh-spinner
Version:
Library for Loading Spinner - Angular 4/5/6
60 lines (59 loc) • 12.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { NghSpinnerService } from './ngh-spinner.service';
export class NghSpinnerComponent {
/**
* @param {?} spinnerService
*/
constructor(spinnerService) {
this.spinnerService = spinnerService;
this.bgColor = 'rgba(0,0,0,0.5)';
this.color = '#2598db';
this.type = 'circle-clip';
this.showHide = false;
this.subscription = this.spinnerService.getState().subscribe(showHide => { this.showHide = showHide; });
}
/**
* @return {?}
*/
ngOnInit() {
}
}
NghSpinnerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngh-spinner',
template: `<div class="overlay" [ngStyle]="{'background-color':bgColor,'color': color}" *ngIf="showHide" >
<div class="loader" [ngClass]="type">
<div></div>
</div>
</div>`,
styles: [`.overlay{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:2}.loader{position:absolute;top:50%;left:50%}.circle-clip{border:5px solid transparent;border-radius:50%;border-top:5px solid;width:25px;height:25px;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}.square-spin{border:5px solid;width:25px;height:25px;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}.bar-load{height:4px;position:relative;overflow:hidden;background-color:#c3c3c3;width:25%;left:37.5%}.bar-load div{display:block;position:absolute;content:"";left:-200px;width:200px;height:4px;background-color:currentColor;-webkit-animation:2s linear infinite loading;animation:2s linear infinite loading}@-webkit-keyframes loading{from{left:-200px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}} loading{from{left:-200px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}.bar-center{height:4px;position:relative;overflow:hidden;background-color:#c3c3c3;width:25%;left:37.5%}.bar-center div{content:"";display:inline;position:absolute;width:0;height:100%;left:50%;text-align:center;background-color:currentColor;-webkit-animation:3s linear infinite center-loading;animation:3s linear infinite center-loading}@-webkit-keyframes center-loading{from{left:50%;width:0;z-index:100}33.3333%{left:0;width:100%;z-index:10}to{left:0;width:100%}} center-loading{from{left:50%;width:0;z-index:100}33.3333%{left:0;width:100%;z-index:10}to{left:0;width:100%}}.spinner{width:40px;height:40px;margin:40px;-webkit-animation:1.4s ease-in-out infinite rotate,1.4s ease-in-out infinite alternate background;animation:1.4s ease-in-out infinite rotate,1.4s ease-in-out infinite alternate background}@-webkit-keyframes rotate{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(0);transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}} rotate{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(0);transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}}@-webkit-keyframes background{0%,100%,50%{background-color:currentColor}} background{0%,100%,50%{background-color:currentColor}}.signal{border:5px solid currentColor;border-radius:30px;height:30px;left:50%;margin:-15px 0 0 -15px;opacity:0;position:absolute;top:50%;width:30px;-webkit-animation:1s ease-out infinite pulsate;animation:1s ease-out infinite pulsate}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}} pulsate{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}} spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`]
},] },
];
/** @nocollapse */
NghSpinnerComponent.ctorParameters = () => [
{ type: NghSpinnerService }
];
NghSpinnerComponent.propDecorators = {
bgColor: [{ type: Input }],
color: [{ type: Input }],
type: [{ type: Input }]
};
if (false) {
/** @type {?} */
NghSpinnerComponent.prototype.bgColor;
/** @type {?} */
NghSpinnerComponent.prototype.color;
/** @type {?} */
NghSpinnerComponent.prototype.type;
/** @type {?} */
NghSpinnerComponent.prototype.showHide;
/** @type {?} */
NghSpinnerComponent.prototype.subscription;
/** @type {?} */
NghSpinnerComponent.prototype.spinnerService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdoLXNwaW5uZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmdoLXNwaW5uZXIvIiwic291cmNlcyI6WyJsaWIvbmdoLXNwaW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUE4QixLQUFLLEVBQUcsTUFBTSxlQUFlLENBQUM7QUFFOUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFVMUQsTUFBTTs7OztJQVFKLFlBQW9CLGNBQWtDO1FBQWxDLG1CQUFjLEdBQWQsY0FBYyxDQUFvQjt1QkFQcEMsaUJBQWlCO3FCQUNuQixTQUFTO29CQUNWLGFBQWE7d0JBQ2xCLEtBQUs7UUFLYixJQUFJLENBQUMsWUFBWSxHQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxFQUFFLENBQUMsU0FBUyxDQUFFLFFBQVEsQ0FBQyxFQUFFLEdBQUUsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQUM7S0FDdkc7Ozs7SUFDRCxRQUFRO0tBRVA7OztZQXRCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7OztPQUlMO2dCQUNMLE1BQU0sRUFBRSxDQUFDLHU4R0FBdThHLENBQUM7YUFDbDlHOzs7O1lBVFEsaUJBQWlCOzs7c0JBV3ZCLEtBQUs7b0JBQ0wsS0FBSzttQkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsT25EZXN0cm95LE9uQ2hhbmdlcywgSW5wdXQgIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBOZ2hTcGlubmVyU2VydmljZSB9IGZyb20gJy4vbmdoLXNwaW5uZXIuc2VydmljZSc7XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmdoLXNwaW5uZXInLFxyXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cIm92ZXJsYXlcIiBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmQtY29sb3InOmJnQ29sb3IsJ2NvbG9yJzogY29sb3J9XCIgKm5nSWY9XCJzaG93SGlkZVwiID5cclxuICAgIDxkaXYgY2xhc3M9XCJsb2FkZXJcIiBbbmdDbGFzc109XCJ0eXBlXCI+XHJcbiAgICAgICAgPGRpdj48L2Rpdj5cclxuICAgICA8L2Rpdj5cclxuPC9kaXY+YCxcclxuICBzdHlsZXM6IFtgLm92ZXJsYXl7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7cmlnaHQ6MDtib3R0b206MDt6LWluZGV4OjJ9LmxvYWRlcntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6NTAlO2xlZnQ6NTAlfS5jaXJjbGUtY2xpcHtib3JkZXI6NXB4IHNvbGlkIHRyYW5zcGFyZW50O2JvcmRlci1yYWRpdXM6NTAlO2JvcmRlci10b3A6NXB4IHNvbGlkO3dpZHRoOjI1cHg7aGVpZ2h0OjI1cHg7LXdlYmtpdC1hbmltYXRpb246MnMgbGluZWFyIGluZmluaXRlIHNwaW47YW5pbWF0aW9uOjJzIGxpbmVhciBpbmZpbml0ZSBzcGlufS5zcXVhcmUtc3Bpbntib3JkZXI6NXB4IHNvbGlkO3dpZHRoOjI1cHg7aGVpZ2h0OjI1cHg7LXdlYmtpdC1hbmltYXRpb246MnMgbGluZWFyIGluZmluaXRlIHNwaW47YW5pbWF0aW9uOjJzIGxpbmVhciBpbmZpbml0ZSBzcGlufS5iYXItbG9hZHtoZWlnaHQ6NHB4O3Bvc2l0aW9uOnJlbGF0aXZlO292ZXJmbG93OmhpZGRlbjtiYWNrZ3JvdW5kLWNvbG9yOiNjM2MzYzM7d2lkdGg6MjUlO2xlZnQ6MzcuNSV9LmJhci1sb2FkIGRpdntkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtsZWZ0Oi0yMDBweDt3aWR0aDoyMDBweDtoZWlnaHQ6NHB4O2JhY2tncm91bmQtY29sb3I6Y3VycmVudENvbG9yOy13ZWJraXQtYW5pbWF0aW9uOjJzIGxpbmVhciBpbmZpbml0ZSBsb2FkaW5nO2FuaW1hdGlvbjoycyBsaW5lYXIgaW5maW5pdGUgbG9hZGluZ31ALXdlYmtpdC1rZXlmcmFtZXMgbG9hZGluZ3tmcm9te2xlZnQ6LTIwMHB4O3dpZHRoOjMwJX01MCV7d2lkdGg6MzAlfTcwJXt3aWR0aDo3MCV9ODAle2xlZnQ6NTAlfTk1JXtsZWZ0OjEyMCV9dG97bGVmdDoxMDAlfX1Aa2V5ZnJhbWVzIGxvYWRpbmd7ZnJvbXtsZWZ0Oi0yMDBweDt3aWR0aDozMCV9NTAle3dpZHRoOjMwJX03MCV7d2lkdGg6NzAlfTgwJXtsZWZ0OjUwJX05NSV7bGVmdDoxMjAlfXRve2xlZnQ6MTAwJX19LmJhci1jZW50ZXJ7aGVpZ2h0OjRweDtwb3NpdGlvbjpyZWxhdGl2ZTtvdmVyZmxvdzpoaWRkZW47YmFja2dyb3VuZC1jb2xvcjojYzNjM2MzO3dpZHRoOjI1JTtsZWZ0OjM3LjUlfS5iYXItY2VudGVyIGRpdntjb250ZW50OlwiXCI7ZGlzcGxheTppbmxpbmU7cG9zaXRpb246YWJzb2x1dGU7d2lkdGg6MDtoZWlnaHQ6MTAwJTtsZWZ0OjUwJTt0ZXh0LWFsaWduOmNlbnRlcjtiYWNrZ3JvdW5kLWNvbG9yOmN1cnJlbnRDb2xvcjstd2Via2l0LWFuaW1hdGlvbjozcyBsaW5lYXIgaW5maW5pdGUgY2VudGVyLWxvYWRpbmc7YW5pbWF0aW9uOjNzIGxpbmVhciBpbmZpbml0ZSBjZW50ZXItbG9hZGluZ31ALXdlYmtpdC1rZXlmcmFtZXMgY2VudGVyLWxvYWRpbmd7ZnJvbXtsZWZ0OjUwJTt3aWR0aDowO3otaW5kZXg6MTAwfTMzLjMzMzMle2xlZnQ6MDt3aWR0aDoxMDAlO3otaW5kZXg6MTB9dG97bGVmdDowO3dpZHRoOjEwMCV9fUBrZXlmcmFtZXMgY2VudGVyLWxvYWRpbmd7ZnJvbXtsZWZ0OjUwJTt3aWR0aDowO3otaW5kZXg6MTAwfTMzLjMzMzMle2xlZnQ6MDt3aWR0aDoxMDAlO3otaW5kZXg6MTB9dG97bGVmdDowO3dpZHRoOjEwMCV9fS5zcGlubmVye3dpZHRoOjQwcHg7aGVpZ2h0OjQwcHg7bWFyZ2luOjQwcHg7LXdlYmtpdC1hbmltYXRpb246MS40cyBlYXNlLWluLW91dCBpbmZpbml0ZSByb3RhdGUsMS40cyBlYXNlLWluLW91dCBpbmZpbml0ZSBhbHRlcm5hdGUgYmFja2dyb3VuZDthbmltYXRpb246MS40cyBlYXNlLWluLW91dCBpbmZpbml0ZSByb3RhdGUsMS40cyBlYXNlLWluLW91dCBpbmZpbml0ZSBhbHRlcm5hdGUgYmFja2dyb3VuZH1ALXdlYmtpdC1rZXlmcmFtZXMgcm90YXRlezAley13ZWJraXQtdHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKDApIHJvdGF0ZVkoMCk7dHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKDApIHJvdGF0ZVkoMCl9NTAley13ZWJraXQtdHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKC0xODBkZWcpIHJvdGF0ZVkoMCk7dHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKC0xODBkZWcpIHJvdGF0ZVkoMCl9MTAwJXstd2Via2l0LXRyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKC0xODBkZWcpO3RyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKC0xODBkZWcpfX1Aa2V5ZnJhbWVzIHJvdGF0ZXswJXstd2Via2l0LXRyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgwKSByb3RhdGVZKDApO3RyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgwKSByb3RhdGVZKDApfTUwJXstd2Via2l0LXRyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKDApO3RyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKDApfTEwMCV7LXdlYmtpdC10cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgtMTgwZGVnKTt0cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgtMTgwZGVnKX19QC13ZWJraXQta2V5ZnJhbWVzIGJhY2tncm91bmR7MCUsMTAwJSw1MCV7YmFja2dyb3VuZC1jb2xvcjpjdXJyZW50Q29sb3J9fUBrZXlmcmFtZXMgYmFja2dyb3VuZHswJSwxMDAlLDUwJXtiYWNrZ3JvdW5kLWNvbG9yOmN1cnJlbnRDb2xvcn19LnNpZ25hbHtib3JkZXI6NXB4IHNvbGlkIGN1cnJlbnRDb2xvcjtib3JkZXItcmFkaXVzOjMwcHg7aGVpZ2h0OjMwcHg7bGVmdDo1MCU7bWFyZ2luOi0xNXB4IDAgMCAtMTVweDtvcGFjaXR5OjA7cG9zaXRpb246YWJzb2x1dGU7dG9wOjUwJTt3aWR0aDozMHB4Oy13ZWJraXQtYW5pbWF0aW9uOjFzIGVhc2Utb3V0IGluZmluaXRlIHB1bHNhdGU7YW5pbWF0aW9uOjFzIGVhc2Utb3V0IGluZmluaXRlIHB1bHNhdGV9QC13ZWJraXQta2V5ZnJhbWVzIHB1bHNhdGV7MCV7LXdlYmtpdC10cmFuc2Zvcm06c2NhbGUoLjEpO3RyYW5zZm9ybTpzY2FsZSguMSk7b3BhY2l0eTowfTUwJXtvcGFjaXR5OjF9MTAwJXstd2Via2l0LXRyYW5zZm9ybTpzY2FsZSgxLjIpO3RyYW5zZm9ybTpzY2FsZSgxLjIpO29wYWNpdHk6MH19QGtleWZyYW1lcyBwdWxzYXRlezAley13ZWJraXQtdHJhbnNmb3JtOnNjYWxlKC4xKTt0cmFuc2Zvcm06c2NhbGUoLjEpO29wYWNpdHk6MH01MCV7b3BhY2l0eToxfTEwMCV7LXdlYmtpdC10cmFuc2Zvcm06c2NhbGUoMS4yKTt0cmFuc2Zvcm06c2NhbGUoMS4yKTtvcGFjaXR5OjB9fUAtd2Via2l0LWtleWZyYW1lcyBzcGluezAley13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKX0xMDAley13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgzNjBkZWcpfX1Aa2V5ZnJhbWVzIHNwaW57MCV7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDApO3RyYW5zZm9ybTpyb3RhdGUoMCl9MTAwJXstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKTt0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyl9fWBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ2hTcGlubmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0ICB7XHJcbiAgQElucHV0KCkgYmdDb2xvcj0gJ3JnYmEoMCwwLDAsMC41KSc7IC8vb3ZlcmxheSBiYWNrZ3JvdW5kIGNvbG9yXHJcbiAgQElucHV0KCkgY29sb3I9ICcjMjU5OGRiJzsgLy8gc3Bpbm5lciBjb2xvclxyXG4gIEBJbnB1dCgpIHR5cGU9ICdjaXJjbGUtY2xpcCc7IC8vIHNwaW5uZXIgdHlwZVxyXG4gIHNob3dIaWRlID1mYWxzZTsgLy8gU2hvdyBvciBIaWRlIExvYWRlclxyXG5cclxuICBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcclxuICBcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNwaW5uZXJTZXJ2aWNlIDogTmdoU3Bpbm5lclNlcnZpY2UpIHsgXHJcbiAgICB0aGlzLnN1YnNjcmlwdGlvbiA9dGhpcy5zcGlubmVyU2VydmljZS5nZXRTdGF0ZSgpLnN1YnNjcmliZSggc2hvd0hpZGUgPT4ge3RoaXMuc2hvd0hpZGUgPSBzaG93SGlkZSB9KTtcclxuICB9XHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICBcclxuICB9XHJcblxyXG5cclxuXHJcbn1cclxuIl19