UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

28 lines (27 loc) 741 B
.g-skeleton { --_--animation-from: calc(-100% * var(--g-flow-direction)); --_--animation-to: calc(100% * var(--g-flow-direction)); --_--gradient-deg: calc(90deg * var(--g-flow-direction)); display: inline-block; position: relative; z-index: 0; width: 100%; border-radius: 5px; overflow: hidden; background-color: var(--g-color-base-generic); } .g-skeleton::after { position: absolute; inset: 0; background-image: linear-gradient(var(--_--gradient-deg), transparent, var(--g-color-base-generic)); animation: g-skeleton 1.2s ease-out infinite; content: ""; } @keyframes g-skeleton { 0% { transform: translateX(var(--_--animation-from)); } 100% { transform: translateX(var(--_--animation-to)); } }