HTML & CSS で作る 最も単純なshimmer(シマー)のサンプルコード

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

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

サンプル

<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倍位に設定するといい感じに動きます。