simple image placeholders

Jan 29, 2025
1 minute to read

Here’s a simple way to display loading skeletons for images

.avatar {
  background: #eee;
  animation: pulse 1.5s ease-in-out infinite;

  &[src] {
    animation: none;
    background: none;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}