.image-loading-enabled img:not(.image-ready) {visibility: hidden;}
/* From Uiverse.io by satyamchaudharydev */
.image-spinner {
  --gap: 5px;
  --clr: #d62d20;
  --height: 23px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  pointer-events: none;
  overflow: hidden;
}
.image-spinner > span {
  display: block;
  flex: 0 0 6px;
  width: 6px;
  height: var(--height);
  background: var(--clr);
  animation: image-loading-grow 1s ease-in-out infinite;
}
.image-spinner > span:nth-child(2) {animation-delay: .15s;}
.image-spinner > span:nth-child(3) {animation-delay: .3s;}
.image-spinner > span:nth-child(4) {animation-delay: .475s;}
@keyframes image-loading-grow {
  0%,100% {transform: scaleY(1);}
  50% {transform: scaleY(1.8);}
}
@media (prefers-reduced-motion: reduce) {
  .image-spinner > span {animation: none;}
}