Ghost Loading Skeleton HTML, CSS

ghost-loading-skeleton.css

.skeleton {
    border-radius: 3px;
    -webkit-animation: skeleton 0.5s infinite alternate;
            animation: skeleton 0.5s infinite alternate;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    background-color: rgba(0, 0, 0, 0.02);
}
.large.skeleton {
    height: 1.5em;
    width: 5em;
}

@-webkit-keyframes skeleton {
  0% {
    background-color: rgba(0, 0, 0, 0.02);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.06);
  }
}

@keyframes skeleton {
  0% {
    background-color: rgba(0, 0, 0, 0.02);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.06);
  }
}

ghost-loading-skeleton.html

<div class="skeleton"></div>
<!-- OR -->
<div class="skeleton large"></div>

Modify CSS/Style to adjust Height, Width as needed. For Example: <div class="skeleton large" style=" width: 100%; height: 40px; "></div>