CSS skeleton loading animation code

<div class="skeleton-container">
  <div class="skeleton-image"></div>
  <div class="skeleton-text"></div>
</div>

.skeleton-container {
  display: flex;
  align-items: center;
  padding: 1em;
}
.skeleton-image,
.skeleton-text {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #e4e4e4;
  animation: skeleton-pulse 1000ms ease-in-out infinite;
}
.skeleton-image {
  max-width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem;
}
.skeleton-text {
  height: 2rem;
  margin-top: 0.5rem;
}
@keyframes skeleton-pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}