@marklb/ngx-loading
Version:
A customisable loading spinner for Angular applications.
146 lines (136 loc) • 33.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('/ngx-loading', ['exports', '@angular/core', '@angular/common'], factory) :
(global = global || self, factory((global.marklb = global.marklb || {}, global.marklb['ngx-loading'] = {}), global.ng.core, global.ng.common));
}(this, (function (exports, i0, common) { 'use strict';
var NgxLoadingConfig = /** */ (function () {
function NgxLoadingConfig(config) {
if (config === void 0) { config = {}; }
this.backdropBorderRadius = config.backdropBorderRadius;
this.backdropBackgroundColour = config.backdropBackgroundColour;
this.fullScreenBackdrop = config.fullScreenBackdrop;
this.animationType = config.animationType;
this.primaryColour = config.primaryColour;
this.secondaryColour = config.secondaryColour;
this.tertiaryColour = config.tertiaryColour;
}
return NgxLoadingConfig;
}());
var ngxLoadingAnimationTypes = {
chasingDots: 'chasing-dots',
circle: 'sk-circle',
circleSwish: 'circleSwish',
cubeGrid: 'sk-cube-grid',
doubleBounce: 'double-bounce',
none: 'none',
pulse: 'pulse',
rectangleBounce: 'rectangle-bounce',
rotatingPlane: 'rotating-plane',
threeBounce: 'three-bounce',
wanderingCubes: 'wandering-cubes'
};
var NgxLoadingService = /** @class */ (function () {
function NgxLoadingService(config) {
this.config = config;
this.loadingConfig = this.config || new NgxLoadingConfig();
}
return NgxLoadingService;
}());
NgxLoadingService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxLoadingService_Factory() { return new NgxLoadingService(i0.ɵɵinject("loadingConfig", 8)); }, token: NgxLoadingService, providedIn: "root" });
NgxLoadingService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
NgxLoadingService.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: ['loadingConfig',] }] }
]; };
var NgxLoadingComponent = /** @class */ (function () {
function NgxLoadingComponent(LoadingService, changeDetectorRef) {
this.LoadingService = LoadingService;
this.changeDetectorRef = changeDetectorRef;
this.config = new NgxLoadingConfig();
this.defaultConfig = {
animationType: ngxLoadingAnimationTypes.threeBounce,
backdropBackgroundColour: 'rgba(0, 0, 0, 0.3)',
backdropBorderRadius: '0px',
fullScreenBackdrop: false,
primaryColour: '#ffffff',
secondaryColour: '#ffffff',
tertiaryColour: '#ffffff'
};
this.ngxLoadingAnimationTypes = ngxLoadingAnimationTypes;
}
NgxLoadingComponent.prototype.ngOnInit = function () {
this.setupConfig();
};
NgxLoadingComponent.prototype.setupConfig = function () {
for (var option in this.defaultConfig) {
if (typeof this.config[option] === 'boolean') {
if (this.config[option] != null) {
continue;
}
this.config[option] = this.LoadingService.loadingConfig[option] != null ? this.LoadingService.loadingConfig[option] : this.defaultConfig[option];
}
else {
if (this.config[option] != null) {
continue;
}
this.config[option] = this.LoadingService.loadingConfig[option] != null ? this.LoadingService.loadingConfig[option] : this.defaultConfig[option];
}
}
};
NgxLoadingComponent.prototype.setShow = function (show) {
this.show = show;
this.changeDetectorRef.markForCheck();
};
return NgxLoadingComponent;
}());
NgxLoadingComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-loading',
template: "\n <div *ngIf=\"show\">\n <div class=\"backdrop\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'border-radius': config?.backdropBorderRadius, 'background-color': config?.backdropBackgroundColour}\"></div>\n\n <div [ngSwitch]=\"config?.animationType\">\n <div class=\"spinner-circle\" *ngSwitchCase=\"ngxLoadingAnimationTypes.circle\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"\n [ngStyle]=\"{'border-top-color': config?.secondaryColour, 'border-right-color': config?.secondaryColour, 'border-bottom-color': config?.secondaryColour, 'border-left-color': config?.primaryColour}\">\n </div>\n\n <div *ngSwitchCase=\"ngxLoadingAnimationTypes.cubeGrid\" class=\"sk-cube-grid\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"sk-cube sk-cube1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube2\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube3\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube4\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube5\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube6\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube7\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube8\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"sk-cube sk-cube9\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n </div>\n\n <div class=\"spinner-sk-rotateplane\" *ngSwitchCase=\"ngxLoadingAnimationTypes.rotatingPlane\" [ngStyle]=\"{'background-color': config?.primaryColour}\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"></div>\n\n <div class=\"spinner-rectangle-bounce\" *ngSwitchCase=\"ngxLoadingAnimationTypes.rectangleBounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"rect1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"rect2\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"rect3\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"rect4\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"rect5\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n </div>\n\n <div class=\"spinner-wandering-cubes\" *ngSwitchCase=\"ngxLoadingAnimationTypes.wanderingCubes\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"cube1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"cube2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\n </div>\n\n <div class=\"spinner-double-bounce\" *ngSwitchCase=\"ngxLoadingAnimationTypes.doubleBounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"double-bounce1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"double-bounce2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\n </div>\n\n <div class=\"spinner-pulse\" *ngSwitchCase=\"ngxLoadingAnimationTypes.pulse\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n\n <div class=\"spinner-chasing-dots\" *ngSwitchCase=\"ngxLoadingAnimationTypes.chasingDots\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"dot1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"dot2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\n </div>\n\n <div class=\"spinner-circle-swish\" *ngSwitchCase=\"ngxLoadingAnimationTypes.circleSwish\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'color': config?.primaryColour}\"></div>\n\n <div *ngSwitchCase=\"ngxLoadingAnimationTypes.none\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"></div>\n\n <div *ngSwitchDefault class=\"spinner-three-bounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\n <div class=\"bounce1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\n <div class=\"bounce2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\n <div class=\"bounce3\" [ngStyle]=\"{'background-color': config?.tertiaryColour}\"></div>\n </div>\n\n <ng-container *ngIf=\"template\">\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n </ng-container>\n </div>\n </div>\n ",
styles: ["\n .backdrop {\n z-index: 1999;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.3);\n }\n\n /* Spinner Circle styles */\n .spinner-circle,\n .spinner-circle:after {\n border-radius: 50%;\n width: 10em;\n height: 10em;\n }\n\n .spinner-circle {\n font-size: 6px;\n border-top: 1.1em solid rgba(255, 255, 255, 0.2);\n border-right: 1.1em solid rgba(255, 255, 255, 0.2);\n border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);\n border-left: 1.1em solid #ffffff;\n margin: auto;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: load8 1.1s infinite linear;\n animation: load8 1.1s infinite linear;\n }\n @-webkit-keyframes load8 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes load8 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n\n /* Circle Swish styles */\n .spinner-circle-swish {\n font-size: 60px;\n overflow: hidden;\n width: 1em;\n height: 1em;\n z-index: 2000;\n border-radius: 50%;\n margin: auto;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;\n animation: load6 1.7s infinite ease, round 1.7s infinite ease;\n }\n @-webkit-keyframes load6 {\n 0% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n 5%,\n 95% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n 10%,\n 59% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;\n }\n 20% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;\n }\n 38% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;\n }\n 100% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n }\n @keyframes load6 {\n 0% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n 5%,\n 95% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n 10%,\n 59% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;\n }\n 20% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;\n }\n 38% {\n box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;\n }\n 100% {\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\n }\n }\n @-webkit-keyframes round {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes round {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n\n /* Cube Grid styles */\n .sk-cube-grid {\n width: 40px;\n height: 40px;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n }\n\n .sk-cube-grid .sk-cube {\n width: 33%;\n height: 33%;\n background-color: #333;\n float: left;\n -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;\n animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;\n }\n\n .sk-cube-grid .sk-cube1 {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n }\n\n .sk-cube-grid .sk-cube2 {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n }\n\n .sk-cube-grid .sk-cube3 {\n -webkit-animation-delay: 0.4s;\n animation-delay: 0.4s;\n }\n\n .sk-cube-grid .sk-cube4 {\n -webkit-animation-delay: 0.1s;\n animation-delay: 0.1s;\n }\n\n .sk-cube-grid .sk-cube5 {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n }\n\n .sk-cube-grid .sk-cube6 {\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n }\n\n .sk-cube-grid .sk-cube7 {\n -webkit-animation-delay: 0s;\n animation-delay: 0s;\n }\n\n .sk-cube-grid .sk-cube8 {\n -webkit-animation-delay: 0.1s;\n animation-delay: 0.1s;\n }\n\n .sk-cube-grid .sk-cube9 {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n }\n\n @-webkit-keyframes sk-cubeGridScaleDelay {\n 0%, 70%, 100% {\n -webkit-transform: scale3D(1, 1, 1);\n transform: scale3D(1, 1, 1);\n } 35% {\n -webkit-transform: scale3D(0, 0, 1);\n transform: scale3D(0, 0, 1);\n }\n }\n\n @keyframes sk-cubeGridScaleDelay {\n 0%, 70%, 100% {\n -webkit-transform: scale3D(1, 1, 1);\n transform: scale3D(1, 1, 1);\n } 35% {\n -webkit-transform: scale3D(0, 0, 1);\n transform: scale3D(0, 0, 1);\n }\n }\n\n /* Double Bounce styles */\n .spinner-double-bounce {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n }\n\n .double-bounce1, .double-bounce2 {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: #333;\n opacity: 0.6;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-animation: sk-bounce 2.0s infinite ease-in-out;\n animation: sk-bounce 2.0s infinite ease-in-out;\n }\n\n .double-bounce2 {\n -webkit-animation-delay: -1.0s;\n animation-delay: -1.0s;\n }\n\n @-webkit-keyframes sk-bounce {\n 0%, 100% { -webkit-transform: scale(0.0) }\n 50% { -webkit-transform: scale(1.0) }\n }\n\n @keyframes sk-bounce {\n 0%, 100% {\n transform: scale(0.0);\n -webkit-transform: scale(0.0);\n } 50% {\n transform: scale(1.0);\n -webkit-transform: scale(1.0);\n }\n }\n\n /* Pulse styles */\n .spinner-pulse {\n width: 40px;\n height: 40px;\n background-color: #333;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n border-radius: 100%;\n -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\n animation: sk-scaleout 1.0s infinite ease-in-out;\n }\n\n @-webkit-keyframes sk-scaleout {\n 0% { -webkit-transform: scale(0) }\n 100% {\n -webkit-transform: scale(1.0);\n opacity: 0;\n }\n }\n\n @keyframes sk-scaleout {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 100% {\n -webkit-transform: scale(1.0);\n transform: scale(1.0);\n opacity: 0;\n }\n }\n\n /* Three Bounce styles */\n .spinner-three-bounce {\n width: 70px;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 20px;\n margin: auto;\n z-index: 2000;\n }\n\n .spinner-three-bounce > div {\n width: 18px;\n height: 18px;\n background-color: #ffffff;\n\n border-radius: 100%;\n display: inline-block;\n -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n }\n\n .spinner-three-bounce .bounce1 {\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n }\n\n .spinner-three-bounce .bounce2 {\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n }\n\n @-webkit-keyframes sk-bouncedelay {\n 0%, 80%, 100% { -webkit-transform: scale(0) }\n 40% { -webkit-transform: scale(1.0) }\n }\n\n @keyframes sk-bouncedelay {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 40% {\n -webkit-transform: scale(1.0);\n transform: scale(1.0);\n }\n }\n\n /* Rotate Plane styles */\n .spinner-sk-rotateplane {\n width: 40px;\n height: 40px;\n background-color: #ffffff;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;\n animation: sk-rotateplane 1.2s infinite ease-in-out;\n }\n\n @-webkit-keyframes sk-rotateplane {\n 0% { -webkit-transform: perspective(120px) }\n 50% { -webkit-transform: perspective(120px) rotateY(180deg) }\n 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }\n }\n\n @keyframes sk-rotateplane {\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)\n } 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)\n } 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n }\n\n /* Rectangle Bounce styles*/\n .spinner-rectangle-bounce {\n width: 50px;\n height: 40px;\n font-size: 10px;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n }\n\n .spinner-rectangle-bounce > div {\n background-color: #ffffff;\n height: 100%;\n width: 6px;\n display: inline-block;\n -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;\n animation: sk-stretchdelay 1.2s infinite ease-in-out;\n }\n\n .spinner-rectangle-bounce .rect2 {\n -webkit-animation-delay: -1.1s;\n animation-delay: -1.1s;\n }\n\n .spinner-rectangle-bounce .rect3 {\n -webkit-animation-delay: -1.0s;\n animation-delay: -1.0s;\n }\n\n .spinner-rectangle-bounce .rect4 {\n -webkit-animation-delay: -0.9s;\n animation-delay: -0.9s;\n }\n\n .spinner-rectangle-bounce .rect5 {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s;\n }\n\n @-webkit-keyframes sk-stretchdelay {\n 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }\n 20% { -webkit-transform: scaleY(1.0) }\n }\n\n @keyframes sk-stretchdelay {\n 0%, 40%, 100% {\n transform: scaleY(0.4);\n -webkit-transform: scaleY(0.4);\n } 20% {\n transform: scaleY(1.0);\n -webkit-transform: scaleY(1.0);\n }\n }\n\n /* Wandering Cubes styles */\n .spinner-wandering-cubes {\n width: 60px;\n height: 58px;\n font-size: 10px;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n }\n\n .cube1, .cube2 {\n background-color: #ffffff;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 0;\n left: 0;\n -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;\n animation: sk-cubemove 1.8s infinite ease-in-out;\n }\n\n .cube2 {\n -webkit-animation-delay: -0.9s;\n animation-delay: -0.9s;\n }\n\n @-webkit-keyframes sk-cubemove {\n 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }\n 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }\n 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }\n 100% { -webkit-transform: rotate(-360deg) }\n }\n\n @keyframes sk-cubemove {\n 25% {\n transform: translateX(42px) rotate(-90deg) scale(0.5);\n -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);\n } 50% {\n transform: translateX(42px) translateY(42px) rotate(-179deg);\n -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);\n } 50.1% {\n transform: translateX(42px) translateY(42px) rotate(-180deg);\n -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);\n } 75% {\n transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\n -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\n } 100% {\n transform: rotate(-360deg);\n -webkit-transform: rotate(-360deg);\n }\n }\n\n /* Circle styles */\n .sk-circle {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n }\n .sk-circle .sk-child {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n }\n .sk-circle .sk-child:before {\n content: '';\n display: block;\n margin: 0 auto;\n width: 15%;\n height: 15%;\n background-color: #333;\n border-radius: 100%;\n -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;\n animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;\n }\n .sk-circle .sk-circle2 {\n -webkit-transform: rotate(30deg);\n -ms-transform: rotate(30deg);\n transform: rotate(30deg); }\n .sk-circle .sk-circle3 {\n -webkit-transform: rotate(60deg);\n -ms-transform: rotate(60deg);\n transform: rotate(60deg); }\n .sk-circle .sk-circle4 {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg); }\n .sk-circle .sk-circle5 {\n -webkit-transform: rotate(120deg);\n -ms-transform: rotate(120deg);\n transform: rotate(120deg); }\n .sk-circle .sk-circle6 {\n -webkit-transform: rotate(150deg);\n -ms-transform: rotate(150deg);\n transform: rotate(150deg); }\n .sk-circle .sk-circle7 {\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg); }\n .sk-circle .sk-circle8 {\n -webkit-transform: rotate(210deg);\n -ms-transform: rotate(210deg);\n transform: rotate(210deg); }\n .sk-circle .sk-circle9 {\n -webkit-transform: rotate(240deg);\n -ms-transform: rotate(240deg);\n transform: rotate(240deg); }\n .sk-circle .sk-circle10 {\n -webkit-transform: rotate(270deg);\n -ms-transform: rotate(270deg);\n transform: rotate(270deg); }\n .sk-circle .sk-circle11 {\n -webkit-transform: rotate(300deg);\n -ms-transform: rotate(300deg);\n transform: rotate(300deg); }\n .sk-circle .sk-circle12 {\n -webkit-transform: rotate(330deg);\n -ms-transform: rotate(330deg);\n transform: rotate(330deg); }\n .sk-circle .sk-circle2:before {\n -webkit-animation-delay: -1.1s;\n animation-delay: -1.1s; }\n .sk-circle .sk-circle3:before {\n -webkit-animation-delay: -1s;\n animation-delay: -1s; }\n .sk-circle .sk-circle4:before {\n -webkit-animation-delay: -0.9s;\n animation-delay: -0.9s; }\n .sk-circle .sk-circle5:before {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s; }\n .sk-circle .sk-circle6:before {\n -webkit-animation-delay: -0.7s;\n animation-delay: -0.7s; }\n .sk-circle .sk-circle7:before {\n -webkit-animation-delay: -0.6s;\n animation-delay: -0.6s; }\n .sk-circle .sk-circle8:before {\n -webkit-animation-delay: -0.5s;\n animation-delay: -0.5s; }\n .sk-circle .sk-circle9:before {\n -webkit-animation-delay: -0.4s;\n animation-delay: -0.4s; }\n .sk-circle .sk-circle10:before {\n -webkit-animation-delay: -0.3s;\n animation-delay: -0.3s; }\n .sk-circle .sk-circle11:before {\n -webkit-animation-delay: -0.2s;\n animation-delay: -0.2s; }\n .sk-circle .sk-circle12:before {\n -webkit-animation-delay: -0.1s;\n animation-delay: -0.1s; }\n\n @-webkit-keyframes sk-circleBounceDelay {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n }\n\n @keyframes sk-circleBounceDelay {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n }\n\n /* Chasing Dots styles */\n .spinner-chasing-dots {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 2000;\n text-align: center;\n -webkit-animation: sk-rotate 2.0s infinite linear;\n animation: sk-rotate 2.0s infinite linear;\n }\n\n .dot1, .dot2 {\n width: 60%;\n height: 60%;\n display: inline-block;\n position: absolute;\n top: 0;\n background-color: #333;\n border-radius: 100%;\n -webkit-animation: sk-bounce 2.0s infinite ease-in-out;\n animation: sk-bounce 2.0s infinite ease-in-out;\n }\n\n .dot2 {\n top: auto;\n bottom: 0;\n -webkit-animation-delay: -1.0s;\n animation-delay: -1.0s;\n }\n\n @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}\n @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}\n\n @-webkit-keyframes sk-bounce {\n 0%, 100% { -webkit-transform: scale(0.0) }\n 50% { -webkit-transform: scale(1.0) }\n }\n\n @keyframes sk-bounce {\n 0%, 100% {\n transform: scale(0.0);\n -webkit-transform: scale(0.0);\n } 50% {\n transform: scale(1.0);\n -webkit-transform: scale(1.0);\n }\n }\n\n .full-screen {\n position: fixed;\n position: -ms-page;\n }\n "]
},] }
];
NgxLoadingComponent.ctorParameters = function () { return [
{ type: NgxLoadingService },
{ type: i0.ChangeDetectorRef }
]; };
NgxLoadingComponent.propDecorators = {
show: [{ type: i0.Input }],
config: [{ type: i0.Input }],
template: [{ type: i0.Input }]
};
var NgxLoadingModule = /** @class */ (function () {
function NgxLoadingModule() {
}
NgxLoadingModule.forRoot = function (loadingConfig) {
return {
ngModule: NgxLoadingModule,
providers: [{ provide: 'loadingConfig', useValue: loadingConfig }]
};
};
return NgxLoadingModule;
}());
NgxLoadingModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [common.CommonModule],
declarations: [NgxLoadingComponent],
exports: [NgxLoadingComponent]
},] }
];
/*
* Public API Surface of ngx-loading
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxLoadingComponent = NgxLoadingComponent;
exports.NgxLoadingConfig = NgxLoadingConfig;
exports.NgxLoadingModule = NgxLoadingModule;
exports.NgxLoadingService = NgxLoadingService;
exports.ngxLoadingAnimationTypes = ngxLoadingAnimationTypes;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=marklb-ngx-loading.umd.js.map