src/app/common/table/skeleton-rows/asy-skeleton-rows.component.scss
@import '../../../../styles/shared';
$skeleton-row-height: 41px !default;
$skeleton-row-gradient-percent: 20% !default;
$skeleton-row-gradient-color: rgba(215, 215, 215, 0.3) !default;
$skeleton-row-animation-speed: 2s !default;
.skeleton-row {
height: $skeleton-row-height;
will-change: transform;
transform: translate3d(0, 0, 0);
&:before {
animation: progress $skeleton-row-animation-speed ease-in-out infinite;
background-size: 200px 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 200px;
height: 100%;
content: '';
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
$skeleton-row-gradient-color,
rgba(255, 255, 255, 0)
);
}
&:first-child td {
border-top: 0;
}
}
@keyframes progress {
0% {
transform: translate3d(-200px, 0, 0);
}
100% {
transform: translate3d(calc(200px + 100vw), 0, 0);
}
}