Skeleton Loader

by Raul Bojalil

HTML

<div class="skeleton">
  <div class="skeleton-glow skeleton-list-item">
  </div>
  <div class="skeleton-glow skeleton-list-item">
  </div>
  <div class="skeleton-glow skeleton-list-item">
  </div>
  <div class="skeleton-glow skeleton-list-item">
  </div>
</div>

<table>
  <thead>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
  </thead>
  <tbody>
    <tr>
      <td class="skeleton-glow">Uno</td>
      <td class="skeleton-glow">Dos</td>
      <td class="skeleton-glow">Tres</td>
    </tr>
    <tr>
      <td class="">Un</td>
      <td class="skeleton-glow">Deux</td>
      <td class="skeleton-glow">Trois</td>
    </tr>
  </tbody>
</table>

CSS

.skeleton-glow {
    -webkit-box-align: center;
    align-items: center;
    overflow: hidden;
    animation: 1.5s ease-in-out 0s infinite normal none running animation-skeleton;
    color: transparent;
    cursor: progress;
    background: rgba(0, 0, 0, 0.1);
}

@keyframes animation-skeleton {
  0%   {opacity: 0.5;}
  25% {opacity: 0.75}
  50% {opacity: 1}
  75%   {opacity: 0.75;}
  100%   {opacity: 0.5;}
}