projects/app-base-library/src/lib/angular/components/spinner.component.ts
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 |
|
Methods |
Inputs |
constructor()
|
diap
|
Type: |
position
|
Default value: |
visible
|
Type: |
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;
}
}