움직이는 Skeleton UI 구현

<div class="skeleton"></div>

-

 

.skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    #d8d8d8 0%,
    #eeeeee 50%,
    #d8d8d8 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 2s infinite linear;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}