File

projects/app-base-library/src/lib/angular/components/spinner.component.ts

Implements

OnInit

Metadata

selector ab-spinner
styles .spinner { margin: 5px auto; font-size: 5px; 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); -ms-transform: translateZ(0); transform: translateZ(0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @-webkit-keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; } } @keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; } } , .spinner-diap { margin: 5px auto; font-size: 5px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load6 1.1s infinite ease; animation: load6 1.1s infinite ease; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes load6 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #f9f9f9, 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.5), -1.8em -1.8em 0 0em rgba(249,249,249, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.7), 1.8em -1.8em 0 0em #f9f9f9, 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.5), 1.8em -1.8em 0 0em rgba(249,249,249, 0.7), 2.5em 0em 0 0em #f9f9f9, 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.5), 2.5em 0em 0 0em rgba(249,249,249, 0.7), 1.75em 1.75em 0 0em #f9f9f9, 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.5), 1.75em 1.75em 0 0em rgba(249,249,249, 0.7), 0em 2.5em 0 0em #f9f9f9, -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.5), 0em 2.5em 0 0em rgba(249,249,249, 0.7), -1.8em 1.8em 0 0em #f9f9f9, -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.5), -1.8em 1.8em 0 0em rgba(249,249,249, 0.7), -2.6em 0em 0 0em #f9f9f9, -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.5), -2.6em 0em 0 0em rgba(249,249,249, 0.7), -1.8em -1.8em 0 0em #f9f9f9; } } @keyframes load6 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #f9f9f9, 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.5), -1.8em -1.8em 0 0em rgba(249,249,249, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.7), 1.8em -1.8em 0 0em #f9f9f9, 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.5), 1.8em -1.8em 0 0em rgba(249,249,249, 0.7), 2.5em 0em 0 0em #f9f9f9, 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.5), 2.5em 0em 0 0em rgba(249,249,249, 0.7), 1.75em 1.75em 0 0em #f9f9f9, 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.5), 1.75em 1.75em 0 0em rgba(249,249,249, 0.7), 0em 2.5em 0 0em #f9f9f9, -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.5), 0em 2.5em 0 0em rgba(249,249,249, 0.7), -1.8em 1.8em 0 0em #f9f9f9, -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.5), -1.8em 1.8em 0 0em rgba(249,249,249, 0.7), -2.6em 0em 0 0em #f9f9f9, -1.8em -1.8em 0 0em rgba(249,249,249, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.5), -2.6em 0em 0 0em rgba(249,249,249, 0.7), -1.8em -1.8em 0 0em #f9f9f9; } }
template
<div [className]="(diap) ? 'spinner-diap' : 'spinner'"
     [style.display]="(visible==false) ? 'none' : 'block'"
>... loading ...</div>

Index

Methods
Inputs

Constructor

constructor()

Inputs

diap

Type: boolean

position

Default value: 'center'

visible

Type: boolean

Methods

ngOnInit
ngOnInit()
Returns : void
import {Component, Input, EventEmitter, OnInit} from '@angular/core';

@Component({
    selector: 'ab-spinner',
    template: `
        <div [className]="(diap) ? 'spinner-diap' : 'spinner'"
             [style.display]="(visible==false) ? 'none' : 'block'"
        >... loading ...</div>
    `,
    styles: [
        `            
            .spinner {
                margin: 5px auto;
                font-size: 5px;
                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);
                -ms-transform: translateZ(0);
                transform: translateZ(0);
                
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            @-webkit-keyframes load5 {
                0%,
                100% {
                    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
                }
                12.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
                }
                25% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                37.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                50% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                62.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                75% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                87.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
                }
            }
            @keyframes load5 {
                0%,
                100% {
                    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
                }
                12.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
                }
                25% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                37.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                50% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                62.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                75% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
                }
                87.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
                }
            }

        `,
        `
            .spinner-diap {
                margin: 5px auto;
                font-size: 5px;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                position: relative;
                text-indent: -9999em;
                -webkit-animation: load6 1.1s infinite ease;
                animation: load6 1.1s infinite ease;
                -webkit-transform: translateZ(0);
                -ms-transform: translateZ(0);
                transform: translateZ(0);
            }
            @-webkit-keyframes load6 {
                0%,
                100% {
                    box-shadow: 0em -2.6em 0em 0em #f9f9f9, 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.5), -1.8em -1.8em 0 0em rgba(249,249,249, 0.7);
                }
                12.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.7), 1.8em -1.8em 0 0em #f9f9f9, 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.5);
                }
                25% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.5), 1.8em -1.8em 0 0em rgba(249,249,249, 0.7), 2.5em 0em 0 0em #f9f9f9, 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                37.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.5), 2.5em 0em 0 0em rgba(249,249,249, 0.7), 1.75em 1.75em 0 0em #f9f9f9, 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                50% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.5), 1.75em 1.75em 0 0em rgba(249,249,249, 0.7), 0em 2.5em 0 0em #f9f9f9, -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                62.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.5), 0em 2.5em 0 0em rgba(249,249,249, 0.7), -1.8em 1.8em 0 0em #f9f9f9, -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                75% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.5), -1.8em 1.8em 0 0em rgba(249,249,249, 0.7), -2.6em 0em 0 0em #f9f9f9, -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                87.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.5), -2.6em 0em 0 0em rgba(249,249,249, 0.7), -1.8em -1.8em 0 0em #f9f9f9;
                }
            }
            @keyframes load6 {
                0%,
                100% {
                    box-shadow: 0em -2.6em 0em 0em #f9f9f9, 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.5), -1.8em -1.8em 0 0em rgba(249,249,249, 0.7);
                }
                12.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.7), 1.8em -1.8em 0 0em #f9f9f9, 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.5);
                }
                25% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.5), 1.8em -1.8em 0 0em rgba(249,249,249, 0.7), 2.5em 0em 0 0em #f9f9f9, 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                37.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.5), 2.5em 0em 0 0em rgba(249,249,249, 0.7), 1.75em 1.75em 0 0em #f9f9f9, 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                50% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.5), 1.75em 1.75em 0 0em rgba(249,249,249, 0.7), 0em 2.5em 0 0em #f9f9f9, -1.8em 1.8em 0 0em rgba(249,249,249, 0.2), -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                62.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.5), 0em 2.5em 0 0em rgba(249,249,249, 0.7), -1.8em 1.8em 0 0em #f9f9f9, -2.6em 0em 0 0em rgba(249,249,249, 0.2), -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                75% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.5), -1.8em 1.8em 0 0em rgba(249,249,249, 0.7), -2.6em 0em 0 0em #f9f9f9, -1.8em -1.8em 0 0em rgba(249,249,249, 0.2);
                }
                87.5% {
                    box-shadow: 0em -2.6em 0em 0em rgba(249,249,249, 0.2), 1.8em -1.8em 0 0em rgba(249,249,249, 0.2), 2.5em 0em 0 0em rgba(249,249,249, 0.2), 1.75em 1.75em 0 0em rgba(249,249,249, 0.2), 0em 2.5em 0 0em rgba(249,249,249, 0.2), -1.8em 1.8em 0 0em rgba(249,249,249, 0.5), -2.6em 0em 0 0em rgba(249,249,249, 0.7), -1.8em -1.8em 0 0em #f9f9f9;
                }
            }
        `
    ]
})
export class SpinnerComponent implements OnInit {
    @Input() visible: boolean;
    @Input() diap: boolean;
    @Input() position = 'center';

    constructor() {

    }

    ngOnInit() {
        this.visible = false;
    }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""