@varlet/ui/es/skeleton/skeleton.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --skeleton-content-padding: 16px; --skeleton-card-height: 160px; --skeleton-card-border-radius: 4px; --skeleton-card-margin-bottom: 16px; --skeleton-card-background-color: rgba(0, 0, 0, 0.12); --skeleton-animation-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0)); --skeleton-avatar-size: 34px; --skeleton-avatar-border-radius: 50%; --skeleton-avatar-margin-right: 16px; --skeleton-avatar-background-color: rgba(0, 0, 0, 0.12); --skeleton-title-width: 50%; --skeleton-title-border-radius: 10px; --skeleton-title-background-color: rgba(0, 0, 0, 0.12); --skeleton-row-height: 12px; --skeleton-row-border-radius: 10px; --skeleton-row-margin-top: 10px;}@keyframes var-skeleton-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-skeleton { width: 100%;}.var-skeleton__content { padding: var(--skeleton-content-padding);}.var-skeleton__card { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-card-height); background-color: var(--skeleton-card-background-color); margin-bottom: var(--skeleton-card-margin-bottom); border-radius: var(--skeleton-card-border-radius); transition: background-color 0.25s;}.var-skeleton__article { display: flex; width: 100%;}.var-skeleton__avatar { position: relative; overflow: hidden; flex-shrink: 0; width: var(--skeleton-avatar-size); height: var(--skeleton-avatar-size); border-radius: var(--skeleton-avatar-border-radius); background-color: var(--skeleton-avatar-background-color); margin-right: var(--skeleton-avatar-margin-right); transition: 0.25s background-color;}.var-skeleton__section { width: 100%; padding-top: 8px;}.var-skeleton__title { position: relative; overflow: hidden; width: var(--skeleton-title-width); height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); border-radius: var(--skeleton-title-border-radius); transition: 0.25s background-color;}.var-skeleton__row { position: relative; overflow: hidden; width: 100%; height: var(--skeleton-row-height); background-color: var(--skeleton-title-background-color); margin-top: var(--skeleton-row-margin-top); border-radius: var(--skeleton-row-border-radius); transition: 0.25s background-color;}.var-skeleton__fullscreen { position: fixed; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--skeleton-title-background-color); transition: 0.25s background-color;}.var-skeleton--animation::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-skeleton-animation 1s infinite; background: var(--skeleton-animation-background); transition: 0.25s background-color;}