44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import {Component, Input} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'xxx-placeholder',
|
|
styles: [`
|
|
.placeholder {
|
|
position: relative;
|
|
background-color: #bbbbbb;
|
|
background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
|
|
background-size: 400% 100%;
|
|
min-height: 100px;
|
|
min-width: 200px;
|
|
|
|
animation-duration: 3s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: infinite;
|
|
animation-name: placeHolderShimmer;
|
|
animation-timing-function: linear;
|
|
|
|
@keyframes placeHolderShimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
}
|
|
`],
|
|
template: `
|
|
<div *ngIf="loading" class="placeholder" [style.height]="height" [style.width]="width"></div>
|
|
<img [src]="src" [alt]="alt" [style]="style" [style.height]="height" [style.width]="width" loading="lazy" (load)="loading = false" />
|
|
`
|
|
})
|
|
export class PlaceholderComponent {
|
|
loading = true;
|
|
|
|
@Input() alt?: string;
|
|
@Input() src!: string;
|
|
@Input() style!: string;
|
|
@Input() height: string = 'auto';
|
|
@Input() width: string = 'auto';
|
|
}
|