Repeating skeleton tiles with CSS backgrounds

skeleton-tiles.css

.skeleton__tiles {
  --list-tile-height: 6.75rem;
  --skeleton-count: linear-gradient(
    rgba(255, 255, 255, 0.25) 0.5rem,
    transparent 0
  );
  --skeleton-text-large: linear-gradient(
    var(--gray-20) 0.5rem,
    transparent 0
  );
  --skeleton-text-small: linear-gradient(
    var(--gray-20) 0.25rem,
    transparent 0
  );
  --skeleton-tile-border: linear-gradient(
    var(--list-tile-border-color) var(--space-small),
    transparent 0
  );
  margin-right: var(--space-small);
  background-color: #fff;
  background-image: var(--skeleton-tile-border),
    var(--skeleton-count), var(--skeleton-text-large),
    var(--skeleton-text-small), var(--skeleton-text-small),
    linear-gradient(
      var(--list-tile-border-color) 100%,
      transparent 0
    );
  background-size: 100% var(--list-tile-height),
    4rem var(--list-tile-height),
    12rem var(--list-tile-height),
    10rem var(--list-tile-height),
    16rem var(--list-tile-height), 9rem 100%;
  background-position: 0 0, 2.5rem 3rem, 9.75rem 1.5rem,
    9.75rem 3rem, 9.75rem 6rem, 0 0;
  background-repeat: no-repeat repeat;
  height: 100%;
}