@opentiny/vue-theme/skeleton-item/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-skeleton-item{--tv-SkeletonItem-bg-color:var(--tv-color-bg, #f5f5f5);--tv-SkeletonItem-border-radius:var(--tv-border-radius-sm, 4px);--tv-SkeletonItem-image-icon-color:var(--tv-color-icon-disabled, #c2c2c2);--tv-SkeletonItem-square-height:var(--tv-size-height-sm, 28px);--tv-SkeletonItem-circle-border-radius:var(--tv-border-radius-round, 999px);--tv-SkeletonItem-circle-large-size:60px;--tv-SkeletonItem-circle-medium-size:48px;--tv-SkeletonItem-circle-small-size:20px;--tv-SkeletonItem-image-small-size-height:60px;--tv-SkeletonItem-image-small-size-width:60px;--tv-SkeletonItem-image-medium-size-height:100px;--tv-SkeletonItem-image-medium-size-width:100px;--tv-SkeletonItem-image-large-size-height:200px;--tv-SkeletonItem-image-large-size-width:200px;--tv-SkeletonItem-linear-gradient:linear-gradient(to right, var(--tv-color-bg-hover, #f5f5f5), var(--tv-color-border-container, #f0f0f0), var(--tv-color-bg-hover, #f5f5f5));background-color:var(--tv-SkeletonItem-bg-color);border-radius:var(--tv-SkeletonItem-border-radius)}.tiny-skeleton-item--active.tiny-skeleton-item{background:var(--tv-SkeletonItem-linear-gradient);background-size:200% 100%;background-position-x:180%;-webkit-animation:1.5s skeleton-loading ease-in-out infinite;animation:1.5s skeleton-loading ease-in-out infinite}.tiny-skeleton-item--square{margin-bottom:12px;width:100%;height:var(--tv-SkeletonItem-square-height)}.tiny-skeleton-item--circle{border-radius:var(--tv-SkeletonItem-circle-border-radius)}.tiny-skeleton-item--circle.tiny-skeleton-item--small{width:var(--tv-SkeletonItem-circle-small-size);height:var(--tv-SkeletonItem-circle-small-size)}.tiny-skeleton-item--circle.tiny-skeleton-item--medium{width:var(--tv-SkeletonItem-circle-medium-size);height:var(--tv-SkeletonItem-circle-medium-size)}.tiny-skeleton-item--circle.tiny-skeleton-item--large{width:var(--tv-SkeletonItem-circle-large-size);height:var(--tv-SkeletonItem-circle-large-size)}.tiny-skeleton-item--image{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-skeleton-item--image svg{width:40%;height:40%;fill:var(--tv-SkeletonItem-image-icon-color)}.tiny-skeleton-item--image.tiny-skeleton-item--small{width:var(--tv-SkeletonItem-image-small-size-width);height:var(--tv-SkeletonItem-image-small-size-height)}.tiny-skeleton-item--image.tiny-skeleton-item--medium{width:var(--tv-SkeletonItem-image-medium-size-width);height:var(--tv-SkeletonItem-image-medium-size-height)}.tiny-skeleton-item--image.tiny-skeleton-item--large{width:var(--tv-SkeletonItem-image-large-size-width);height:var(--tv-SkeletonItem-image-large-size-height)}@-webkit-keyframes skeleton-loading{to{background-position-x:-20%}}@keyframes skeleton-loading{to{background-position-x:-20%}}