File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
styles
|
Type : any
|
Default value : {}
|
|
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-skeleton-item',
templateUrl: './skeleton-item.component.html',
styleUrls: ['./skeleton-item.component.scss'],
})
export class SkeletonItemComponent implements OnInit {
@Input() width: any;
@Input() height: any;
@Input() radius: any;
styles: any = {};
ngOnInit() {
this.styles = {
width: this.width ? this.width : '100%',
height: this.height ? this.height : '1rem'
};
if (typeof this.radius !== 'undefined' && this.radius !== '') {
this.styles.borderRadius = this.radius;
}
}
}
<!-- Generated template for the SkeletonItemComponent component -->
<div [ngStyle]="styles"></div>
$skeletonLineSpacing: 6px;
$animationDuration: 1s;
$defaultBorderRadius: 4px;
$gradientColor1: rgba(130, 130, 130, 0.2);
$gradientColor2: rgba(130, 130, 130, 0.3);
.animated-background {
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: $gradientColor1;
background: linear-gradient(to right, $gradientColor1 8%, $gradientColor2 18%, $gradientColor1 33%);
background-size: 800px 100px;
position: relative;
}
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
:host {
display: block;
&[inline] {
display: inline-block;
div {
display: inline-block;
}
}
&[rounded] div {
border-radius: 999em;
}
&[radius] div {
border-radius: $defaultBorderRadius;
}
div {
@extend .animated-background;
}
&[no-animated] div {
animation: none !important;
background: $gradientColor1;
}
}
app-skeleton-item + app-skeleton-item {
margin-top: $skeletonLineSpacing;
}
Legend
Html element with directive