tu-view-plus
Version:
59 lines (51 loc) • 1.52 kB
CSS
.tu-skeleton__line {
width: 100%;
}
.tu-skeleton__line-row {
margin: 0;
padding: 0;
list-style: none;
}
.tu-skeleton__line-row-item {
height: 16px;
background: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
margin-top: 15px;
}
.tu-skeleton__shape {
background: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
border-radius: var(--tu-border-radius, 2px);
}
.tu-skeleton.is-animation .tu-skeleton__line-row-item {
background: linear-gradient(90deg, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 25%, var(--tu-color-hover-bg, rgba(125, 125, 125, 0.1)) 37%, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 63%);
background-size: 400% 100% ;
animation: tu-skeleton-circle 2.5s ease-in-out infinite;
}
.tu-skeleton.is-animation .tu-skeleton__shape {
background: linear-gradient(90deg, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 25%, var(--tu-color-hover-bg, rgba(125, 125, 125, 0.1)) 37%, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 63%);
background-size: 400% 100% ;
animation: tu-skeleton-circle 2.5s ease-in-out infinite;
}
.tu-skeleton--mini .tu-skeleton__shape {
width: 24px;
height: 24px;
}
.tu-skeleton--small .tu-skeleton__shape {
width: 28px;
height: 28px;
}
.tu-skeleton--medium .tu-skeleton__shape {
width: 32px;
height: 32px;
}
.tu-skeleton--large .tu-skeleton__shape {
width: 36px;
height: 36px;
}
@keyframes tu-skeleton-circle {
0% {
background-position: 200% 100%;
}
100% {
background-position: 0% 50%;
}
}