v4web-components

Version:
Stencil Component Starter
54 lines (49 loc) • 1.54 kB
CSS
.v4-skeleton-square {
  min-height: var(--lab-ds-semantic-placeholder-size-l);
  max-height: var(--lab-ds-semantic-placeholder-size-l);
  background-color: var(--lab-ds-semantic-color-bg-cloudy);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  position: relative;
  overflow: hidden;
}

.v4-skeleton-circle {
  position: relative;
  overflow: hidden;
  display: flex;
  aspect-ratio: 1/1;
  min-height: var(--lab-ds-semantic-placeholder-size-xxs);
  max-height: var(--lab-ds-semantic-placeholder-size-xxl);
  min-width: var(--lab-ds-semantic-placeholder-size-xxs);
  max-width: var(--lab-ds-semantic-placeholder-size-xxl);
  background-color: var(--lab-ds-semantic-color-bg-cloudy);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
}

.v4-skeleton-circle::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffb1 50%, rgba(0, 0, 0, 0) 100%);
  animation: shimmer 3s infinite;
  animation-timing-function: linear;
  content: '';
}

.v4-skeleton-square::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffdd 50%, rgba(0, 0, 0, 0) 100%);
  animation: shimmer 3s infinite;
  animation-timing-function: linear;
  content: '';
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}