ngh-spinner
Version:
Library for Loading Spinner - Angular 4/5/6
59 lines (58 loc) • 12.6 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';
var NghSpinnerComponent = /** @class */ (function () {
function NghSpinnerComponent(spinnerService) {
var _this = this;
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(function (showHide) { _this.showHide = showHide; });
}
/**
* @return {?}
*/
NghSpinnerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
NghSpinnerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngh-spinner',
template: "<div class=\"overlay\" [ngStyle]=\"{'background-color':bgColor,'color': color}\" *ngIf=\"showHide\" >\n <div class=\"loader\" [ngClass]=\"type\">\n <div></div>\n </div>\n</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%}}@keyframes 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%}}@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%}}.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)}}@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)}}@-webkit-keyframes background{0%,100%,50%{background-color:currentColor}}@keyframes 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}}@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}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}"]
},] },
];
/** @nocollapse */
NghSpinnerComponent.ctorParameters = function () { return [
{ type: NghSpinnerService }
]; };
NghSpinnerComponent.propDecorators = {
bgColor: [{ type: Input }],
color: [{ type: Input }],
type: [{ type: Input }]
};
return NghSpinnerComponent;
}());
export { NghSpinnerComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdoLXNwaW5uZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmdoLXNwaW5uZXIvIiwic291cmNlcyI6WyJsaWIvbmdoLXNwaW5uZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUE4QixLQUFLLEVBQUcsTUFBTSxlQUFlLENBQUM7QUFFOUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7O0lBa0J4RCw2QkFBb0IsY0FBa0M7UUFBdEQsaUJBRUM7UUFGbUIsbUJBQWMsR0FBZCxjQUFjLENBQW9CO3VCQVBwQyxpQkFBaUI7cUJBQ25CLFNBQVM7b0JBQ1YsYUFBYTt3QkFDbEIsS0FBSztRQUtiLElBQUksQ0FBQyxZQUFZLEdBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxTQUFTLENBQUUsVUFBQSxRQUFRLElBQUssS0FBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQUM7S0FDdkc7Ozs7SUFDRCxzQ0FBUTs7O0lBQVI7S0FFQzs7Z0JBdEJGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsUUFBUSxFQUFFLGdNQUlMO29CQUNMLE1BQU0sRUFBRSxDQUFDLDI4R0FBdThHLENBQUM7aUJBQ2w5Rzs7OztnQkFUUSxpQkFBaUI7OzswQkFXdkIsS0FBSzt3QkFDTCxLQUFLO3VCQUNMLEtBQUs7OzhCQWZSOztTQVlhLG1CQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LE9uRGVzdHJveSxPbkNoYW5nZXMsIElucHV0ICB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgTmdoU3Bpbm5lclNlcnZpY2UgfSBmcm9tICcuL25naC1zcGlubmVyLnNlcnZpY2UnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25naC1zcGlubmVyJyxcclxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJvdmVybGF5XCIgW25nU3R5bGVdPVwieydiYWNrZ3JvdW5kLWNvbG9yJzpiZ0NvbG9yLCdjb2xvcic6IGNvbG9yfVwiICpuZ0lmPVwic2hvd0hpZGVcIiA+XHJcbiAgICA8ZGl2IGNsYXNzPVwibG9hZGVyXCIgW25nQ2xhc3NdPVwidHlwZVwiPlxyXG4gICAgICAgIDxkaXY+PC9kaXY+XHJcbiAgICAgPC9kaXY+XHJcbjwvZGl2PmAsXHJcbiAgc3R5bGVzOiBbYC5vdmVybGF5e3Bvc2l0aW9uOmZpeGVkO3dpZHRoOjEwMCU7aGVpZ2h0OjEwMCU7dG9wOjA7bGVmdDowO3JpZ2h0OjA7Ym90dG9tOjA7ei1pbmRleDoyfS5sb2FkZXJ7cG9zaXRpb246YWJzb2x1dGU7dG9wOjUwJTtsZWZ0OjUwJX0uY2lyY2xlLWNsaXB7Ym9yZGVyOjVweCBzb2xpZCB0cmFuc3BhcmVudDtib3JkZXItcmFkaXVzOjUwJTtib3JkZXItdG9wOjVweCBzb2xpZDt3aWR0aDoyNXB4O2hlaWdodDoyNXB4Oy13ZWJraXQtYW5pbWF0aW9uOjJzIGxpbmVhciBpbmZpbml0ZSBzcGluO2FuaW1hdGlvbjoycyBsaW5lYXIgaW5maW5pdGUgc3Bpbn0uc3F1YXJlLXNwaW57Ym9yZGVyOjVweCBzb2xpZDt3aWR0aDoyNXB4O2hlaWdodDoyNXB4Oy13ZWJraXQtYW5pbWF0aW9uOjJzIGxpbmVhciBpbmZpbml0ZSBzcGluO2FuaW1hdGlvbjoycyBsaW5lYXIgaW5maW5pdGUgc3Bpbn0uYmFyLWxvYWR7aGVpZ2h0OjRweDtwb3NpdGlvbjpyZWxhdGl2ZTtvdmVyZmxvdzpoaWRkZW47YmFja2dyb3VuZC1jb2xvcjojYzNjM2MzO3dpZHRoOjI1JTtsZWZ0OjM3LjUlfS5iYXItbG9hZCBkaXZ7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtjb250ZW50OlwiXCI7bGVmdDotMjAwcHg7d2lkdGg6MjAwcHg7aGVpZ2h0OjRweDtiYWNrZ3JvdW5kLWNvbG9yOmN1cnJlbnRDb2xvcjstd2Via2l0LWFuaW1hdGlvbjoycyBsaW5lYXIgaW5maW5pdGUgbG9hZGluZzthbmltYXRpb246MnMgbGluZWFyIGluZmluaXRlIGxvYWRpbmd9QC13ZWJraXQta2V5ZnJhbWVzIGxvYWRpbmd7ZnJvbXtsZWZ0Oi0yMDBweDt3aWR0aDozMCV9NTAle3dpZHRoOjMwJX03MCV7d2lkdGg6NzAlfTgwJXtsZWZ0OjUwJX05NSV7bGVmdDoxMjAlfXRve2xlZnQ6MTAwJX19QGtleWZyYW1lcyBsb2FkaW5ne2Zyb217bGVmdDotMjAwcHg7d2lkdGg6MzAlfTUwJXt3aWR0aDozMCV9NzAle3dpZHRoOjcwJX04MCV7bGVmdDo1MCV9OTUle2xlZnQ6MTIwJX10b3tsZWZ0OjEwMCV9fS5iYXItY2VudGVye2hlaWdodDo0cHg7cG9zaXRpb246cmVsYXRpdmU7b3ZlcmZsb3c6aGlkZGVuO2JhY2tncm91bmQtY29sb3I6I2MzYzNjMzt3aWR0aDoyNSU7bGVmdDozNy41JX0uYmFyLWNlbnRlciBkaXZ7Y29udGVudDpcIlwiO2Rpc3BsYXk6aW5saW5lO3Bvc2l0aW9uOmFic29sdXRlO3dpZHRoOjA7aGVpZ2h0OjEwMCU7bGVmdDo1MCU7dGV4dC1hbGlnbjpjZW50ZXI7YmFja2dyb3VuZC1jb2xvcjpjdXJyZW50Q29sb3I7LXdlYmtpdC1hbmltYXRpb246M3MgbGluZWFyIGluZmluaXRlIGNlbnRlci1sb2FkaW5nO2FuaW1hdGlvbjozcyBsaW5lYXIgaW5maW5pdGUgY2VudGVyLWxvYWRpbmd9QC13ZWJraXQta2V5ZnJhbWVzIGNlbnRlci1sb2FkaW5ne2Zyb217bGVmdDo1MCU7d2lkdGg6MDt6LWluZGV4OjEwMH0zMy4zMzMzJXtsZWZ0OjA7d2lkdGg6MTAwJTt6LWluZGV4OjEwfXRve2xlZnQ6MDt3aWR0aDoxMDAlfX1Aa2V5ZnJhbWVzIGNlbnRlci1sb2FkaW5ne2Zyb217bGVmdDo1MCU7d2lkdGg6MDt6LWluZGV4OjEwMH0zMy4zMzMzJXtsZWZ0OjA7d2lkdGg6MTAwJTt6LWluZGV4OjEwfXRve2xlZnQ6MDt3aWR0aDoxMDAlfX0uc3Bpbm5lcnt3aWR0aDo0MHB4O2hlaWdodDo0MHB4O21hcmdpbjo0MHB4Oy13ZWJraXQtYW5pbWF0aW9uOjEuNHMgZWFzZS1pbi1vdXQgaW5maW5pdGUgcm90YXRlLDEuNHMgZWFzZS1pbi1vdXQgaW5maW5pdGUgYWx0ZXJuYXRlIGJhY2tncm91bmQ7YW5pbWF0aW9uOjEuNHMgZWFzZS1pbi1vdXQgaW5maW5pdGUgcm90YXRlLDEuNHMgZWFzZS1pbi1vdXQgaW5maW5pdGUgYWx0ZXJuYXRlIGJhY2tncm91bmR9QC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZXswJXstd2Via2l0LXRyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgwKSByb3RhdGVZKDApO3RyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgwKSByb3RhdGVZKDApfTUwJXstd2Via2l0LXRyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKDApO3RyYW5zZm9ybTpwZXJzcGVjdGl2ZSgxMjBweCkgcm90YXRlWCgtMTgwZGVnKSByb3RhdGVZKDApfTEwMCV7LXdlYmtpdC10cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgtMTgwZGVnKTt0cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgtMTgwZGVnKX19QGtleWZyYW1lcyByb3RhdGV7MCV7LXdlYmtpdC10cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoMCkgcm90YXRlWSgwKTt0cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoMCkgcm90YXRlWSgwKX01MCV7LXdlYmtpdC10cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgwKTt0cmFuc2Zvcm06cGVyc3BlY3RpdmUoMTIwcHgpIHJvdGF0ZVgoLTE4MGRlZykgcm90YXRlWSgwKX0xMDAley13ZWJraXQtdHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKC0xODBkZWcpIHJvdGF0ZVkoLTE4MGRlZyk7dHJhbnNmb3JtOnBlcnNwZWN0aXZlKDEyMHB4KSByb3RhdGVYKC0xODBkZWcpIHJvdGF0ZVkoLTE4MGRlZyl9fUAtd2Via2l0LWtleWZyYW1lcyBiYWNrZ3JvdW5kezAlLDEwMCUsNTAle2JhY2tncm91bmQtY29sb3I6Y3VycmVudENvbG9yfX1Aa2V5ZnJhbWVzIGJhY2tncm91bmR7MCUsMTAwJSw1MCV7YmFja2dyb3VuZC1jb2xvcjpjdXJyZW50Q29sb3J9fS5zaWduYWx7Ym9yZGVyOjVweCBzb2xpZCBjdXJyZW50Q29sb3I7Ym9yZGVyLXJhZGl1czozMHB4O2hlaWdodDozMHB4O2xlZnQ6NTAlO21hcmdpbjotMTVweCAwIDAgLTE1cHg7b3BhY2l0eTowO3Bvc2l0aW9uOmFic29sdXRlO3RvcDo1MCU7d2lkdGg6MzBweDstd2Via2l0LWFuaW1hdGlvbjoxcyBlYXNlLW91dCBpbmZpbml0ZSBwdWxzYXRlO2FuaW1hdGlvbjoxcyBlYXNlLW91dCBpbmZpbml0ZSBwdWxzYXRlfUAtd2Via2l0LWtleWZyYW1lcyBwdWxzYXRlezAley13ZWJraXQtdHJhbnNmb3JtOnNjYWxlKC4xKTt0cmFuc2Zvcm06c2NhbGUoLjEpO29wYWNpdHk6MH01MCV7b3BhY2l0eToxfTEwMCV7LXdlYmtpdC10cmFuc2Zvcm06c2NhbGUoMS4yKTt0cmFuc2Zvcm06c2NhbGUoMS4yKTtvcGFjaXR5OjB9fUBrZXlmcmFtZXMgcHVsc2F0ZXswJXstd2Via2l0LXRyYW5zZm9ybTpzY2FsZSguMSk7dHJhbnNmb3JtOnNjYWxlKC4xKTtvcGFjaXR5OjB9NTAle29wYWNpdHk6MX0xMDAley13ZWJraXQtdHJhbnNmb3JtOnNjYWxlKDEuMik7dHJhbnNmb3JtOnNjYWxlKDEuMik7b3BhY2l0eTowfX1ALXdlYmtpdC1rZXlmcmFtZXMgc3BpbnswJXstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoMCl9MTAwJXstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19QGtleWZyYW1lcyBzcGluezAley13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKTt0cmFuc2Zvcm06cm90YXRlKDApfTEwMCV7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7dHJhbnNmb3JtOnJvdGF0ZSgzNjBkZWcpfX1gXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmdoU3Bpbm5lckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCAge1xyXG4gIEBJbnB1dCgpIGJnQ29sb3I9ICdyZ2JhKDAsMCwwLDAuNSknOyAvL292ZXJsYXkgYmFja2dyb3VuZCBjb2xvclxyXG4gIEBJbnB1dCgpIGNvbG9yPSAnIzI1OThkYic7IC8vIHNwaW5uZXIgY29sb3JcclxuICBASW5wdXQoKSB0eXBlPSAnY2lyY2xlLWNsaXAnOyAvLyBzcGlubmVyIHR5cGVcclxuICBzaG93SGlkZSA9ZmFsc2U7IC8vIFNob3cgb3IgSGlkZSBMb2FkZXJcclxuXHJcbiAgc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XHJcbiAgXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBzcGlubmVyU2VydmljZSA6IE5naFNwaW5uZXJTZXJ2aWNlKSB7IFxyXG4gICAgdGhpcy5zdWJzY3JpcHRpb24gPXRoaXMuc3Bpbm5lclNlcnZpY2UuZ2V0U3RhdGUoKS5zdWJzY3JpYmUoIHNob3dIaWRlID0+IHt0aGlzLnNob3dIaWRlID0gc2hvd0hpZGUgfSk7XHJcbiAgfVxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgXHJcbiAgfVxyXG5cclxuXHJcblxyXG59XHJcbiJdfQ==