#root {

    --main-color: #7900b1;

    --main-color-light: #9b4dcb;

}

​

/* loading skeletons */

@keyframes skeleton-loading {

    0% {

        background-position: right;

    }

    50% {

        background-position: left;

    }

    100% {

        background-position: right;

    }

}

​

.skeleton {

    content: ' ';

    cursor: progress;

    padding: 18px;

    border-radius: 10px;

    background: linear-gradient(90deg, var(--main-color) 40%, var(--main-color-light), var(--main-color) 60%) right / 300% 100%;

    animation: skeleton-loading 1.5s linear infinite;

    opacity: 0.3;

}

<div class="card-skeleton">

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

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

</div>

​

.card-skeleton {

  width: 300px;

  height: 200px;

  background: #f0f0f0;

  border-radius: 8px;

  animation: shimmer 1.5s infinite;

}

​

.skeleton-image {

  width: 100%;

  height: 60%;

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}

​

.skeleton-text {

  width: 80%;

  height: 10px;

  margin: 10px auto;

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}

​

@keyframes shimmer {

  0% {

    background-position: -200% 0;

  }

  100% {

    background-position: 200% 0;

  }

}

Don't worry Grepperions. This will not take our jobs (yet)!

byebye google