ngx-busy-loader/esm2015/ngx-busy-loader.js

Configurable spinner component library for Angular apps

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
 */
class SpinnerCircleDottedComponent {
    constructor() { }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
SpinnerCircleDottedComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-dotted',
                template: `<div class="loader">Loading...</div>
`,
                styles: [`.loader{
    margin:100px auto;
    font-size:25px;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load5 1.1s infinite ease;
    animation:load5 1.1s infinite ease;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
@-webkit-keyframes load5{
    0%,
    100%{
        -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);
                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);
    }
    12.5%{
        -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);
                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);
    }
    25%{
        -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);
                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);
    }
    37.5%{
        -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);
                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);
    }
    50%{
        -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);
                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);
    }
    62.5%{
        -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);
                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);
    }
    75%{
        -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);
                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);
    }
    87.5%{
        -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;
                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;
    }
}
@keyframes load5{
    0%,
    100%{
        -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);
                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);
    }
    12.5%{
        -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);
                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);
    }
    25%{
        -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);
                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);
    }
    37.5%{
        -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);
                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);
    }
    50%{
        -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);
                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);
    }
    62.5%{
        -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);
                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);
    }
    75%{
        -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);
                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);
    }
    87.5%{
        -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;
                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;
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleDottedComponent.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerCircleDottedGradientComponent {
    constructor() {
        this.standardSizes = {
            'xs': '5px',
            'sm': '10px',
            'md': '15px',
            'lg': '20px',
            'xl': '25px',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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;
        }
    }
}
SpinnerCircleDottedGradientComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-dotted-gradient',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
</ng-template>
`,
                styles: [`.loader{
    color:#ff8040;
    font-size:15px;
    margin:100px auto;
    width:2em;
    height:2em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load4 1.3s infinite linear;
    animation:load4 1.3s infinite linear;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
@-webkit-keyframes load4{
    0%,
    100%{
        -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;
                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;
    }
    12.5%{
        -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;
                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;
    }
    25%{
        -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;
                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;
    }
    37.5%{
        -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;
                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;
    }
    50%{
        -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;
                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;
    }
    62.5%{
        -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;
                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;
    }
    75%{
        -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;
                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;
    }
    87.5%{
        -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;
                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;
    }
}
@keyframes load4{
    0%,
    100%{
        -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;
                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;
    }
    12.5%{
        -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;
                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;
    }
    25%{
        -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;
                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;
    }
    37.5%{
        -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;
                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;
    }
    50%{
        -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;
                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;
    }
    62.5%{
        -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;
                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;
    }
    75%{
        -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;
                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;
    }
    87.5%{
        -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;
                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;
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleDottedGradientComponent.ctorParameters = () => [];
SpinnerCircleDottedGradientComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerCircleDottedGradientSlowComponent {
    constructor() {
        this.standardSizes = {
            'xs': '25px',
            'sm': '35px',
            'md': '45px',
            'lg': '70px',
            'xl': '100px',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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;
        }
    }
}
SpinnerCircleDottedGradientSlowComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-dotted-gradient-slow',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
</ng-template>
`,
                styles: [`.loader{
    color:#ff8040;
    font-size:90px;
    text-indent:-9999em;
    overflow:hidden;
    width:1em;
    height:1em;
    border-radius:50%;
    margin:72px auto;
    position:relative;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-animation:load6 1.7s infinite ease, round 1.7s infinite ease;
    animation:load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6{
    0%{
        -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;
                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;
    }
    5%,
    95%{
        -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;
                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;
    }
    10%,
    59%{
        -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;
                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;
    }
    20%{
        -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;
                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;
    }
    38%{
        -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;
                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;
    }
    100%{
        -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;
                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;
    }
}
@keyframes load6{
    0%{
        -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;
                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;
    }
    5%,
    95%{
        -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;
                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;
    }
    10%,
    59%{
        -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;
                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;
    }
    20%{
        -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;
                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;
    }
    38%{
        -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;
                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;
    }
    100%{
        -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;
                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;
    }
}
@-webkit-keyframes round{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes round{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleDottedGradientSlowComponent.ctorParameters = () => [];
SpinnerCircleDottedGradientSlowComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerCircleGradientComponent {
    constructor() {
        this.standardSizes = {
            'xs': '3em',
            'sm': '5em',
            'md': '9em',
            'lg': '20em',
            'xl': '25em',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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;
        }
    }
}
SpinnerCircleGradientComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-gradient',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="container">
                <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
            </div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="container">
        <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
    </div>
</ng-template>
`,
                styles: [`.loader{
    font-size:10px;
    margin-top:0px;
    margin-bottom:0px;
    display:inline-block;
    margin:20px;
    text-indent:-9999em;
    width:9em;
    height:9em;
    border-radius:50%;
    background:#ff8000;
    background:-webkit-gradient(linear, left top, right top, color-stop(10%, #ff8000), color-stop(42%, rgba(255, 128, 0, 0)));
    background:linear-gradient(to right, #ff8000 10%, rgba(255, 128, 0, 0) 42%);
    position:relative;
    -webkit-animation:load3 1.4s infinite linear;
    animation:load3 1.4s infinite linear;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.loader:after{
    background:#fff;
    width:75%;
    height:75%;
    border-radius:50%;
    content:'';
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
@-webkit-keyframes load3{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes load3{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
.container{
    width:100%;
    text-align:center;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleGradientComponent.ctorParameters = () => [];
SpinnerCircleGradientComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerCircleGradientSlowComponent {
    constructor() {
        this.standardSizes = {
            'xs': '3em',
            'sm': '5em',
            'md': '9em',
            'lg': '20em',
            'xl': '25em',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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;
        }
    }
}
SpinnerCircleGradientSlowComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-gradient-slow',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="container">
                <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
            </div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="container">
        <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
    </div>
</ng-template>
`,
                styles: [`.loader{
    font-size:10px;
    margin-top:0px;
    margin-bottom:0px;
    display:inline-block;
    margin:20px;
    text-indent:-9999em;
    width:9em;
    height:9em;
    border-radius:50%;
    background:#ff8000;
    background:-webkit-gradient(linear, left top, right top, color-stop(10%, #ff8000), color-stop(42%, rgba(255, 128, 0, 0)));
    background:linear-gradient(to right, #ff8000 10%, rgba(255, 128, 0, 0) 42%);
    position:relative;
    -webkit-animation:load2 4s infinite linear;
    animation:load2 4s infinite linear;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.loader:after{
    background:#fff;
    width:75%;
    height:75%;
    border-radius:50%;
    content:'';
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
@-webkit-keyframes load2{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes load2{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
.container{
    width:100%;
    text-align:center;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleGradientSlowComponent.ctorParameters = () => [];
SpinnerCircleGradientSlowComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerCircleSolidComponent {
    constructor() {
        this.standardSizes = {
            'xs': '3em',
            'sm': '5em',
            'md': '9em',
            'lg': '20em',
            'xl': '25em',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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;
        }
    }
}
SpinnerCircleSolidComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-circle-solid',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="container">
                <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
            </div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="container">
        <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
    </div>
</ng-template>
`,
                styles: [`.loader:after{
    background:#fff;
    border-radius:50%;
    content:'';
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.loader{
    width:10em;
    height:10em;
    border-radius:50%;
    background:#ff8000;
    margin-top:0px;
    margin-bottom:0px;
    display:inline-block;
    margin:20px;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    border-top:1.1em solid rgba(255, 255, 255, 0.2);
    border-right:1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom:1.1em solid rgba(255, 255, 255, 0.2);
    border-left:1.1em solid #ffffff;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-animation:load8 1.1s infinite linear;
    animation:load8 1.1s infinite linear;
}
@-webkit-keyframes load8{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes load8{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
.container{
    width:100%;
    text-align:center;
}
`]
            },] },
];
/** @nocollapse */
SpinnerCircleSolidComponent.ctorParameters = () => [];
SpinnerCircleSolidComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerLinesVerticalComponent {
    /**
     * @param {?} domSanitizer
     */
    constructor(domSanitizer) {
        this.domSanitizer = domSanitizer;
        this.standardSizes = {
            'xs': '5px',
            'sm': '10px',
            'md': '15px',
            'lg': '20px',
            'xl': '30px',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        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'
        };
    }
}
SpinnerLinesVerticalComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-lines-vertical',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div [ngStyle]="containerStyle">
                <div class="loader" [attr.style]="domSanitizer.bypassSecurityTrustStyle('--main-bg-color:' + color + ';' + 'font-size:' + fontSize)">Loading...</div>
            </div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div [ngStyle]="containerStyle">
        <div class="loader" [attr.style]="domSanitizer.bypassSecurityTrustStyle('--main-bg-color:' + color + ';' + 'font-size:' + fontSize)">Loading...</div>
    </div>
</ng-template>
`,
                styles: [`.loader{
    --main-bg-color:#ff8040;
}
.loader,
.loader:before,
.loader:after{
    background:var(--main-bg-color);
    -webkit-animation:load1 1s infinite ease-in-out;
    animation:load1 1s infinite ease-in-out;
    width:1em;
    height:4em;
}
.loader{
    color:var(--main-bg-color);
    text-indent:-9999em;
    margin:88px auto;
    position:relative;
    font-size:11px;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;
}
.loader:before,
.loader:after{
    position:absolute;
    top:0;
    content:'';
}
.loader:before{
    left:-1.5em;
    -webkit-animation-delay:-0.32s;
    animation-delay:-0.32s;
}
.loader:after{
    left:1.5em;
}
@-webkit-keyframes load1{
    0%,
    80%,
    100%{
        -webkit-box-shadow:0 0;
                box-shadow:0 0;
        height:4em;
    }
    40%{
        -webkit-box-shadow:0 -2em;
                box-shadow:0 -2em;
        height:5em;
    }
}
@keyframes load1{
    0%,
    80%,
    100%{
        -webkit-box-shadow:0 0;
                box-shadow:0 0;
        height:4em;
    }
    40%{
        -webkit-box-shadow:0 -2em;
                box-shadow:0 -2em;
        height:5em;
    }
}
.spinner-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1060;
    background-color:rgba(255, 255, 255, 0.596);
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.spinner-container{
    position:fixed;
    top:50%;
    right:0;
    bottom:0;
    left:50%;
    width:44px;
    height:44px;
    z-index:1070;
    -webkit-transform:translate3d(-50%, -50%, 0);
            transform:translate3d(-50%, -50%, 0);
}
.spinner-overlay .loader{
    z-index:100000;
}
`]
            },] },
];
/** @nocollapse */
SpinnerLinesVerticalComponent.ctorParameters = () => [
    { type: DomSanitizer, },
];
SpinnerLinesVerticalComponent.propDecorators = {
    "color": [{ type: Input },],
    "size": [{ type: Input },],
    "overlay": [{ type: Input },],
    "overlayColor": [{ type: Input },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class SpinnerSingleDottedLineComponent {
    constructor() {
        this.standardSizes = {
            'xs': '5px',
            'sm': '10px',
            'md': '15px',
            'lg': '20px',
            'xl': '30px',
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setStyle();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        const /** @type {?} */ color = changes["color"];
        const /** @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 {?}
     */
    setStyle() {
        this.color = this.color ? this.color : '#fb3c6b';
        this.overlayColor = this.overlayColor ? this.overlayColor : '#fefefee8';
        this.overlayStyle = {
            'background-color': this.overlayColor
        };
        this.spinnerStyle = {
            'color': this.color
        };
        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;
        }
    }
}
SpinnerSingleDottedLineComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-spinner-single-dotted-line',
                template: `<ng-container *ngIf="overlay else partial">
    <div id="fullloading" class="spinner-overlay" [ngStyle]="overlayStyle">
        <div class="spinner-container">
            <div class="loader" [ngStyle]="spinnerStyle">Loading...</div>
        </div>
    </div>
</ng-container>
<ng-template #partial>
    <div class="loader" [ngStyle]="spinnerStyle">Loading...<