Skeleton Loading

HTML

<div class="loading-effect">
  <img class="hidden-until-loaded" src="" alt="">
</div>

CSS

.hidden-until-loaded {
  visibility: hidden;
}

.loading-effect {
  position: relative;
  overflow: hidden;
}

.loading-effect:before {
  position: absolute;

  content: "";

  width: 100%;
  height: 100%;

  transform: translateX(-100%);
  animation: loading 1.5s infinite;

  background: linear-gradient(
    90deg
    transparent,
    rgba(255,255,255,0.3),
    transparent
  ),
}

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

window.addEventListener("load", () => {
  document
    .querySelectorAll(".loading-effect, .hidden-until-loaded")
    .forEach((element) => {
      element.classList.remove("loading-effect", "hidden-until-loaded");
    });
});