.loading-indicator-block,
img.bg-placeholder {
  --loading-stripe-a: color-mix(in srgb, var(--color--bg-1), transparent 10%);
  --loading-stripe-b: color-mix(in srgb, var(--color--bg-base), transparent 0%);
  background-color: var(--color--bg-raised);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--loading-stripe-a) 0 12px,
    var(--loading-stripe-b) 12px 24px
  );
  background-size: 34px 34px;
  animation: loading-indicator-stripes 300ms linear infinite;
}

.loading-indicator-block {
  --loading-indicator-height: 12rem;
  inline-size: 100%;
  block-size: var(--loading-indicator-height);
  border-radius: var(--border-radius--base);
}

@keyframes loading-indicator-stripes {
  from { background-position: 0 0; }
  to { background-position: 34px 0; }
}