vexip-ui/css/skeleton.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-skeleton-vars{--vxp-skeleton-width:100%;--vxp-skeleton-height:1em;--vxp-skeleton-spread:0;--vxp-skeleton-color:var(--vxp-content-color-placeholder);--vxp-skeleton-bg-color:var(--vxp-fill-color-hover);--vxp-skeleton-shine-color:rgba(125, 125, 125, 0.2);--vxp-skeleton-radius:var(--vxp-radius-base);--vxp-skeleton-activated-dir:1}.vxp-skeleton{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-block;width:var(--vxp-skeleton-width);height:var(--vxp-skeleton-height);margin-bottom:var(--vxp-skeleton-spread);overflow:hidden;color:var(--vxp-skeleton-color);background-color:var(--vxp-skeleton-bg-color);border-radius:var(--vxp-skeleton-radius)}.vxp-skeleton,.vxp-skeleton *,.vxp-skeleton ::after,.vxp-skeleton ::before{box-sizing:border-box}.vxp-skeleton--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}html.rtl .vxp-skeleton,html[dir=rtl] .vxp-skeleton{--vxp-skeleton-activated-dir:-1}.vxp-skeleton--default{--vxp-skeleton-height:32px}.vxp-skeleton--small{--vxp-skeleton-height:24px}.vxp-skeleton--large{--vxp-skeleton-height:40px}.vxp-skeleton--block{display:block}.vxp-skeleton--round{border-radius:2000px}.vxp-skeleton--circle{width:var(--vxp-skeleton-height);border-radius:50%}.vxp-skeleton--image{display:inline-flex;align-items:center;justify-content:center}.vxp-skeleton--image.vxp-skeleton--block{display:flex}@keyframes vxp-skeleton-loading{0%{transform:translate(calc(var(--vxp-skeleton-activated-dir) * -37.5%))}100%{transform:translate(calc(var(--vxp-skeleton-activated-dir) * 37.5%))}}.vxp-skeleton--activated::after{position:absolute;inset:0 -150%;pointer-events:none;content:"";background-image:linear-gradient(to right,transparent 25%,var(--vxp-skeleton-shine-color) 37%,transparent 63%);animation:vxp-skeleton-loading 2s ease infinite}.vxp-skeleton-group{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-skeleton-group,.vxp-skeleton-group *,.vxp-skeleton-group ::after,.vxp-skeleton-group ::before{box-sizing:border-box}.vxp-skeleton-group--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}