@gravity-ui/uikit
Version:
Gravity UI base styling and components
28 lines (27 loc) • 741 B
CSS
.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));
}
}