UNPKG

tu-view-plus

Version:
59 lines (51 loc) 1.52 kB
.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% !important; 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% !important; 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%; } }