src/app/component/loading/skeleton/skeleton.component.ts
| selector | stbui-loading-skeleton |
| styleUrls | ./skeleton.component.scss |
| templateUrl | ./skeleton.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'stbui-loading-skeleton',
templateUrl: './skeleton.component.html',
styleUrls: ['./skeleton.component.scss']
})
export class SkeletonComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<mat-card>
<mat-card-title>
<p class="card-loading-block" style="width: 94%"></p>
</mat-card-title>
<div class="card-loading-content">
<p class="card-loading-block" style="width: 94%"></p>
<p>
<span class="card-loading-block" style="width: 28%"></span>
<span class="card-loading-block" style="width: 62%"></span>
</p>
<p>
<span class="card-loading-block" style="width: 22%"></span>
<span class="card-loading-block" style="width: 66%"></span>
</p>
<p>
<span class="card-loading-block" style="width: 56%"></span>
<span class="card-loading-block" style="width: 39%"></span>
</p>
<p>
<span class="card-loading-block" style="width: 21%"></span>
<span class="card-loading-block" style="width: 15%"></span>
<span class="card-loading-block" style="width: 40%"></span>
</p>
</div>
</mat-card>
./skeleton.component.scss
mat-card {
margin: 10px;
}
.card-loading-content p {
margin: 0;
}
.card-loading-block {
display: inline-block;
margin: 5px 2% 0 0;
height: 14px;
border-radius: 2px;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(207, 216, 220, 0.2)),
color-stop(rgba(207, 216, 220, 0.4)),
to(rgba(207, 216, 220, 0.2))
);
background: -webkit-linear-gradient(
left,
rgba(207, 216, 220, 0.2),
rgba(207, 216, 220, 0.4),
rgba(207, 216, 220, 0.2)
);
background: linear-gradient(
90deg,
rgba(207, 216, 220, 0.2),
rgba(207, 216, 220, 0.4),
rgba(207, 216, 220, 0.2)
);
animation: card-loading 1.4s ease infinite;
background-size: 600% 600%;
}
@-webkit-keyframes card-loading {
0%,
100% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes card-loading {
0%,
100% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
}