コンテンツローディング時のストレスを軽減するとして使われているシマーのサンプルコードを掲載します。

InstagramやAmazon, Twitterなどでよく使われている、灰色背景に白いグラデーション線が動くやつです。

サンプル

.shimmer { height: 300px; width: 500px; animation-duration: 1.2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: shimmer; animation-timing-function: linear; background: linear-gradient( -45deg, #f0f0f0 0%, #dedede 8%, #dedede 42%, #f0f0f0 50%, #dedede 58%, #dedede 92%, #f0f0f0 100% ); background-size: 1000px 1000px; } @keyframes shimmer { 0% { background-position: 0 0; } 100% { background-position: 1000px 0; } }

<div class="shimmer"></div>
<style>
  .shimmer {
    height: 300px;
    width: 500px;

    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(
      -45deg,
      #f0f0f0 0%,
      #dedede 8%,

      #dedede 42%,
      #f0f0f0 50%,
      #dedede 58%,

      #dedede 92%,
      #f0f0f0 100%
    );
    background-size: 1000px 1000px;
  }

  @keyframes shimmer {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
</style>

background-sizeの2つの1000px と、@keyframes内のbackground-positionの1000pxの3箇所は全て同じ値にする必要があります。
shimmerの長辺の2倍位に設定するといい感じに動きます。