@ozen-ui/kit/__inner__/esm/components/Skeleton/Skeleton.css

React component library

/* xs >= 0px */
/* s >= 640px */
/* m >= 1024px */
/* l >= 1280px */
.Skeleton {
  --skeleton-loader-width: 100px;
  --skeleton-bg-color: var(--color-background-secondary);
  --skeleton-wave-color: var(--color-background-secondary-hover);
  display: flex;
  visibility: initial;
  background-color: var(--skeleton-bg-color);
  background-image: linear-gradient(
    to right,
    var(--skeleton-bg-color) 0%,
    var(--skeleton-wave-color) calc(var(--skeleton-loader-width) / 2),
    var(--skeleton-bg-color) var(--skeleton-loader-width)
  );
  animation: skeleton-wave 1.5s linear infinite;

  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (min-width: 640px) {
.Skeleton {
    animation: skeleton-wave 2.5s linear infinite;
}
  }
.Skeleton_hasChildren {
    max-inline-size: -moz-fit-content;
    max-inline-size: fit-content;
  }
.Skeleton_hasChildren > * {
      visibility: hidden;
    }
@keyframes skeleton-wave {
  0% {
    background-position: calc(-1 * var(--skeleton-loader-width));
  }

  100% {
    background-position: 100vw;
  }
}