ngx-busy-loader
Version:
Configurable spinner component library for Angular apps
453 lines • 57.9 kB
JavaScript
import { Component, Input, NgModule } from '@angular/core';
import { chrome, safari, firefox, opera, ie } from 'is_js';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleDottedComponent = /** @class */ (function () {
function SpinnerCircleDottedComponent() {
}
/**
* @return {?}
*/
SpinnerCircleDottedComponent.prototype.ngOnInit = function () {
};
return SpinnerCircleDottedComponent;
}());
SpinnerCircleDottedComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-dotted',
template: "<div class=\"loader\">Loading...</div>\n",
styles: [".loader{\n margin:100px auto;\n font-size:25px;\n width:1em;\n height:1em;\n border-radius:50%;\n position:relative;\n text-indent:-9999em;\n -webkit-animation:load5 1.1s infinite ease;\n animation:load5 1.1s infinite ease;\n -webkit-transform:translateZ(0);\n transform:translateZ(0);\n}\n@-webkit-keyframes load5{\n 0%,\n 100%{\n -webkit-box-shadow:0em -2.6em 0em 0em #ff8000, 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.5), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7);\n box-shadow:0em -2.6em 0em 0em #ff8000, 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.5), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7);\n }\n 12.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.7), 1.8em -1.8em 0 0em #ff8000, 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.7), 1.8em -1.8em 0 0em #ff8000, 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5);\n }\n 25%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.5), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7), 2.5em 0em 0 0em #ff8000, 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.5), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7), 2.5em 0em 0 0em #ff8000, 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 37.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5), 2.5em 0em 0 0em rgba(255, 128, 0, 0.7), 1.75em 1.75em 0 0em #ff8000, 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5), 2.5em 0em 0 0em rgba(255, 128, 0, 0.7), 1.75em 1.75em 0 0em #ff8000, 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 50%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.5), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.7), 0em 2.5em 0 0em #ff8000, -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.5), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.7), 0em 2.5em 0 0em #ff8000, -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 62.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.5), 0em 2.5em 0 0em rgba(255, 128, 0, 0.7), -1.8em 1.8em 0 0em #ff8000, -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.5), 0em 2.5em 0 0em rgba(255, 128, 0, 0.7), -1.8em 1.8em 0 0em #ff8000, -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 75%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.5), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.7), -2.6em 0em 0 0em #ff8000, -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.5), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.7), -2.6em 0em 0 0em #ff8000, -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 87.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.5), -2.6em 0em 0 0em rgba(255, 128, 0, 0.7), -1.8em -1.8em 0 0em #ff8000;\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.5), -2.6em 0em 0 0em rgba(255, 128, 0, 0.7), -1.8em -1.8em 0 0em #ff8000;\n }\n}\n@keyframes load5{\n 0%,\n 100%{\n -webkit-box-shadow:0em -2.6em 0em 0em #ff8000, 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.5), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7);\n box-shadow:0em -2.6em 0em 0em #ff8000, 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.5), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7);\n }\n 12.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.7), 1.8em -1.8em 0 0em #ff8000, 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.7), 1.8em -1.8em 0 0em #ff8000, 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5);\n }\n 25%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.5), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7), 2.5em 0em 0 0em #ff8000, 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.5), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.7), 2.5em 0em 0 0em #ff8000, 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 37.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5), 2.5em 0em 0 0em rgba(255, 128, 0, 0.7), 1.75em 1.75em 0 0em #ff8000, 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.5), 2.5em 0em 0 0em rgba(255, 128, 0, 0.7), 1.75em 1.75em 0 0em #ff8000, 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 50%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.5), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.7), 0em 2.5em 0 0em #ff8000, -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.5), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.7), 0em 2.5em 0 0em #ff8000, -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.2), -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 62.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.5), 0em 2.5em 0 0em rgba(255, 128, 0, 0.7), -1.8em 1.8em 0 0em #ff8000, -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.5), 0em 2.5em 0 0em rgba(255, 128, 0, 0.7), -1.8em 1.8em 0 0em #ff8000, -2.6em 0em 0 0em rgba(255, 128, 0, 0.2), -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 75%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.5), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.7), -2.6em 0em 0 0em #ff8000, -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.5), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.7), -2.6em 0em 0 0em #ff8000, -1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2);\n }\n 87.5%{\n -webkit-box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.5), -2.6em 0em 0 0em rgba(255, 128, 0, 0.7), -1.8em -1.8em 0 0em #ff8000;\n box-shadow:0em -2.6em 0em 0em rgba(255, 128, 0, 0.2), 1.8em -1.8em 0 0em rgba(255, 128, 0, 0.2), 2.5em 0em 0 0em rgba(255, 128, 0, 0.2), 1.75em 1.75em 0 0em rgba(255, 128, 0, 0.2), 0em 2.5em 0 0em rgba(255, 128, 0, 0.2), -1.8em 1.8em 0 0em rgba(255, 128, 0, 0.5), -2.6em 0em 0 0em rgba(255, 128, 0, 0.7), -1.8em -1.8em 0 0em #ff8000;\n }\n}\n.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleDottedComponent.ctorParameters = function () { return []; };
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleDottedGradientComponent = /** @class */ (function () {
function SpinnerCircleDottedGradientComponent() {
this.standardSizes = {
'xs': '5px',
'sm': '10px',
'md': '15px',
'lg': '20px',
'xl': '25px',
};
}
/**
* @return {?}
*/
SpinnerCircleDottedGradientComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerCircleDottedGradientComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerCircleDottedGradientComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.spinnerStyle = {
'color': this.color
};
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.spinnerStyle['font-size'] = this.standardSizes[this.size];
}
else {
this.spinnerStyle['font-size'] = this.standardSizes.md;
}
};
return SpinnerCircleDottedGradientComponent;
}());
SpinnerCircleDottedGradientComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-dotted-gradient',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n</ng-template>\n",
styles: [".loader{\n color:#ff8040;\n font-size:15px;\n margin:100px auto;\n width:2em;\n height:2em;\n border-radius:50%;\n position:relative;\n text-indent:-9999em;\n -webkit-animation:load4 1.3s infinite linear;\n animation:load4 1.3s infinite linear;\n -webkit-transform:translateZ(0);\n transform:translateZ(0);\n}\n@-webkit-keyframes load4{\n 0%,\n 100%{\n -webkit-box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n }\n 12.5%{\n -webkit-box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n }\n 25%{\n -webkit-box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n }\n 37.5%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 50%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 62.5%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n }\n 75%{\n -webkit-box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n }\n 87.5%{\n -webkit-box-shadow:0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n box-shadow:0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n }\n}\n@keyframes load4{\n 0%,\n 100%{\n -webkit-box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n }\n 12.5%{\n -webkit-box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n }\n 25%{\n -webkit-box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n }\n 37.5%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 50%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 62.5%{\n -webkit-box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n }\n 75%{\n -webkit-box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n }\n 87.5%{\n -webkit-box-shadow:0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n box-shadow:0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n }\n}\n.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleDottedGradientComponent.ctorParameters = function () { return []; };
SpinnerCircleDottedGradientComponent.propDecorators = {
"color": [{ type: Input },],
"size": [{ type: Input },],
"overlay": [{ type: Input },],
"overlayColor": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleDottedGradientSlowComponent = /** @class */ (function () {
function SpinnerCircleDottedGradientSlowComponent() {
this.standardSizes = {
'xs': '25px',
'sm': '35px',
'md': '45px',
'lg': '70px',
'xl': '100px',
};
}
/**
* @return {?}
*/
SpinnerCircleDottedGradientSlowComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerCircleDottedGradientSlowComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerCircleDottedGradientSlowComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.spinnerStyle = {
'color': this.color
};
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.spinnerStyle['font-size'] = this.standardSizes[this.size];
}
else {
this.spinnerStyle['font-size'] = this.standardSizes.md;
}
};
return SpinnerCircleDottedGradientSlowComponent;
}());
SpinnerCircleDottedGradientSlowComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-dotted-gradient-slow',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n</ng-template>\n",
styles: [".loader{\n color:#ff8040;\n font-size:90px;\n text-indent:-9999em;\n overflow:hidden;\n width:1em;\n height:1em;\n border-radius:50%;\n margin:72px auto;\n position:relative;\n -webkit-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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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 -webkit-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 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.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleDottedGradientSlowComponent.ctorParameters = function () { return []; };
SpinnerCircleDottedGradientSlowComponent.propDecorators = {
"color": [{ type: Input },],
"size": [{ type: Input },],
"overlay": [{ type: Input },],
"overlayColor": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleGradientComponent = /** @class */ (function () {
function SpinnerCircleGradientComponent() {
this.standardSizes = {
'xs': '3em',
'sm': '5em',
'md': '9em',
'lg': '20em',
'xl': '25em',
};
}
/**
* @return {?}
*/
SpinnerCircleGradientComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerCircleGradientComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerCircleGradientComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.spinnerStyle = {
'background': "linear-gradient(to right, " + this.color + " 10%, rgba(255,128,0, 0) 42%)"
};
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (chrome() || safari()) {
this.spinnerStyle['background'] = "-webkit-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (firefox()) {
this.spinnerStyle['background'] = "-moz-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (opera()) {
this.spinnerStyle['background'] = "-o-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (ie()) {
this.spinnerStyle['background'] = "-ms-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.spinnerStyle['height'] = this.standardSizes[this.size];
this.spinnerStyle['width'] = this.standardSizes[this.size];
}
else {
this.spinnerStyle['height'] = this.standardSizes.md;
this.spinnerStyle['width'] = this.standardSizes.md;
}
};
return SpinnerCircleGradientComponent;
}());
SpinnerCircleGradientComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-gradient',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n</ng-template>\n",
styles: [".loader{\n font-size:10px;\n margin-top:0px;\n margin-bottom:0px;\n display:inline-block;\n margin:20px;\n text-indent:-9999em;\n width:9em;\n height:9em;\n border-radius:50%;\n background:#ff8000;\n background:-webkit-gradient(linear, left top, right top, color-stop(10%, #ff8000), color-stop(42%, rgba(255, 128, 0, 0)));\n background:linear-gradient(to right, #ff8000 10%, rgba(255, 128, 0, 0) 42%);\n position:relative;\n -webkit-animation:load3 1.4s infinite linear;\n animation:load3 1.4s infinite linear;\n -webkit-transform:translateZ(0);\n transform:translateZ(0);\n}\n.loader:after{\n background:#fff;\n width:75%;\n height:75%;\n border-radius:50%;\n content:'';\n margin:auto;\n position:absolute;\n top:0;\n left:0;\n bottom:0;\n right:0;\n}\n@-webkit-keyframes load3{\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 load3{\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.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n.container{\n width:100%;\n text-align:center;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleGradientComponent.ctorParameters = function () { return []; };
SpinnerCircleGradientComponent.propDecorators = {
"color": [{ type: Input },],
"size": [{ type: Input },],
"overlay": [{ type: Input },],
"overlayColor": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleGradientSlowComponent = /** @class */ (function () {
function SpinnerCircleGradientSlowComponent() {
this.standardSizes = {
'xs': '3em',
'sm': '5em',
'md': '9em',
'lg': '20em',
'xl': '25em',
};
}
/**
* @return {?}
*/
SpinnerCircleGradientSlowComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerCircleGradientSlowComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerCircleGradientSlowComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.spinnerStyle = {
'background': "linear-gradient(to right, " + this.color + " 10%, rgba(255,128,0, 0) 42%)"
};
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (chrome() || safari()) {
this.spinnerStyle['background'] = "-webkit-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (firefox()) {
this.spinnerStyle['background'] = "-moz-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (opera()) {
this.spinnerStyle['background'] = "-o-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
else if (ie()) {
this.spinnerStyle['background'] = "-ms-linear-gradient(left, " + this.color + " 10%, rgba(255,128,0, 0) 42%)";
}
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.spinnerStyle['height'] = this.standardSizes[this.size];
this.spinnerStyle['width'] = this.standardSizes[this.size];
}
else {
this.spinnerStyle['height'] = this.standardSizes.md;
this.spinnerStyle['width'] = this.standardSizes.md;
}
};
return SpinnerCircleGradientSlowComponent;
}());
SpinnerCircleGradientSlowComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-gradient-slow',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n</ng-template>\n",
styles: [".loader{\n font-size:10px;\n margin-top:0px;\n margin-bottom:0px;\n display:inline-block;\n margin:20px;\n text-indent:-9999em;\n width:9em;\n height:9em;\n border-radius:50%;\n background:#ff8000;\n background:-webkit-gradient(linear, left top, right top, color-stop(10%, #ff8000), color-stop(42%, rgba(255, 128, 0, 0)));\n background:linear-gradient(to right, #ff8000 10%, rgba(255, 128, 0, 0) 42%);\n position:relative;\n -webkit-animation:load2 4s infinite linear;\n animation:load2 4s infinite linear;\n -webkit-transform:translateZ(0);\n transform:translateZ(0);\n}\n.loader:after{\n background:#fff;\n width:75%;\n height:75%;\n border-radius:50%;\n content:'';\n margin:auto;\n position:absolute;\n top:0;\n left:0;\n bottom:0;\n right:0;\n}\n@-webkit-keyframes load2{\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 load2{\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.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n.container{\n width:100%;\n text-align:center;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleGradientSlowComponent.ctorParameters = function () { return []; };
SpinnerCircleGradientSlowComponent.propDecorators = {
"color": [{ type: Input },],
"size": [{ type: Input },],
"overlay": [{ type: Input },],
"overlayColor": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerCircleSolidComponent = /** @class */ (function () {
function SpinnerCircleSolidComponent() {
this.standardSizes = {
'xs': '3em',
'sm': '5em',
'md': '9em',
'lg': '20em',
'xl': '25em',
};
}
/**
* @return {?}
*/
SpinnerCircleSolidComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerCircleSolidComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerCircleSolidComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.spinnerStyle = {
'background': this.color
};
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.spinnerStyle['height'] = this.standardSizes[this.size];
this.spinnerStyle['width'] = this.standardSizes[this.size];
}
else {
this.spinnerStyle['height'] = this.standardSizes.md;
this.spinnerStyle['width'] = this.standardSizes.md;
}
};
return SpinnerCircleSolidComponent;
}());
SpinnerCircleSolidComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-circle-solid',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div class=\"container\">\n <div class=\"loader\" [ngStyle]=\"spinnerStyle\">Loading...</div>\n </div>\n</ng-template>\n",
styles: [".loader:after{\n background:#fff;\n border-radius:50%;\n content:'';\n margin:auto;\n position:absolute;\n top:0;\n left:0;\n bottom:0;\n right:0;\n}\n.loader{\n width:10em;\n height:10em;\n border-radius:50%;\n background:#ff8000;\n margin-top:0px;\n margin-bottom:0px;\n display:inline-block;\n margin:20px;\n font-size:10px;\n position:relative;\n text-indent:-9999em;\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 -webkit-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.spinner-overlay{\n position:fixed;\n top:0;\n right:0;\n bottom:0;\n left:0;\n z-index:1060;\n background-color:rgba(255, 255, 255, 0.596);\n -webkit-transform-style:preserve-3d;\n transform-style:preserve-3d;\n}\n.spinner-container{\n position:fixed;\n top:50%;\n right:0;\n bottom:0;\n left:50%;\n width:44px;\n height:44px;\n z-index:1070;\n -webkit-transform:translate3d(-50%, -50%, 0);\n transform:translate3d(-50%, -50%, 0);\n}\n.spinner-overlay .loader{\n z-index:100000;\n}\n.container{\n width:100%;\n text-align:center;\n}\n"]
},] },
];
/** @nocollapse */
SpinnerCircleSolidComponent.ctorParameters = function () { return []; };
SpinnerCircleSolidComponent.propDecorators = {
"color": [{ type: Input },],
"size": [{ type: Input },],
"overlay": [{ type: Input },],
"overlayColor": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SpinnerLinesVerticalComponent = /** @class */ (function () {
/**
* @param {?} domSanitizer
*/
function SpinnerLinesVerticalComponent(domSanitizer) {
this.domSanitizer = domSanitizer;
this.standardSizes = {
'xs': '5px',
'sm': '10px',
'md': '15px',
'lg': '20px',
'xl': '30px',
};
}
/**
* @return {?}
*/
SpinnerLinesVerticalComponent.prototype.ngOnInit = function () {
this.setStyle();
};
/**
* @param {?} changes
* @return {?}
*/
SpinnerLinesVerticalComponent.prototype.ngOnChanges = function (changes) {
var /** @type {?} */ color = changes["color"];
var /** @type {?} */ size = changes["size"];
if ((color && color.previousValue && color.previousValue != color.currentValue && !color.firstChange) || (size && size.previousValue && size.previousValue != size.currentValue && !size.firstChange)) {
this.setStyle();
}
};
/**
* @return {?}
*/
SpinnerLinesVerticalComponent.prototype.setStyle = function () {
this.color = this.color ? this.color : '#fb3c6b';
this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
this.overlayStyle = {
'background-color': this.overlayColor
};
if (Object.keys(this.standardSizes).indexOf(this.size) > -1) {
this.fontSize = this.standardSizes[this.size];
}
else {
this.fontSize = this.standardSizes.md;
}
this.containerStyle = {
'min-height': (this.fontSize.replace('px', '') * 5) + 'px'
};
};
return SpinnerLinesVerticalComponent;
}());
SpinnerLinesVerticalComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-spinner-lines-vertical',
template: "<ng-container *ngIf=\"overlay else partial\">\n <div id=\"fullloading\" class=\"spinner-overlay\" [ngStyle]=\"overlayStyle\">\n <div class=\"spinner-container\">\n <div [ngStyle]=\"containerStyle\">\n <div class=\"loader\" [attr.style]=\"domSanitizer.bypassSecurityTrustStyle('--main-bg-color:' + color + ';' + 'font-size:' + fontSize)\">Loading...</div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-template #partial>\n <div [ngStyle]=\"containerStyle\">\n <div class=\"loader\" [attr.style]=\"domSanitizer.bypassSecurityTrustStyle('--main-bg-color:' + color + ';' + 'font-size:' + fontSize)\">Loading...</div>\n </div>\n</ng-template>\n",
styles: [".loader{\n --main-bg-color:#ff8040;\n}\n.loader,\n.loader:before,\n.loader:after{\n background:var(--main-bg-color);\n -webkit-animation:load1 1s infinite ease-in-out;\n animation:load1 1s infinite ease-in-out;\n width:1em;\n height:4em;\n}\n.loader{\n color:var(--main-bg-color);\n text-indent:-9999em;\n margin:88px auto;\n position:relative;\n font-size:11px;\n -webkit-transform:translateZ(0);\n transform:translateZ(0);\n -webkit-animation-delay:-0.16s;\n animation-delay:-0.16s;\n}\n.loader:before,\n.loader:after{\n position:absolute;\n top:0;\n content:'';\n}\n.loader:before{\n left:-1.5em;\n -webkit-animation-delay:-0.32s;\n animation-delay:-0.32s;\n}\n.loader:after{\n left:1.5em;\n}\n@-webkit-keyframes load1{\n 0%,\n 80%,\n 100%{\n -webkit-box-shadow:0 0;\n box-shadow:0 0;\n