Shimmer Loading EffectをHTMLとCSSで作成する方法

Shimmer Loading Effectとは
Shimmer Loading Effectの作成方法
動く白い要素を斜めにしたい場合

Shimmer Loading Effectとは

データの読み込み中であることをユーザーに伝えるための手法です。

以下のように読み込み中のコンテンツの種類に近似した形状の上に、グレー色でキラキラしたアニメーションを表示させたエフェクトをShimmer Loading Effectと言います。

↓データの読み込みが完了したら、実際のデータが表示されて、アニメーションは停止します。

Shimmer Loading Effectの作成方法

まず、ロード中のグレーのアニメーションなしの状態をHTMLとCSSで作成します。

HTML

<div class="shimmer">
  <div class="shimmer-inner">
    <div class="shimmer-thumb"></div>
  </div>
</div>

CSS

.shimmer {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
  background-color: #eee;
}

.shimmer-inner {
  padding: 12px;
  border-radius: 10px;
  background: #fff;
}

.shimmer-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #eee;
}

次に左から右にアニメーションで動く要素を.shimmer::beforeで作成します。

視認しやすいように一時的に白ではなく紫色(rgba(255, 0, 255, 0.6))で設定しています。

CSS

.shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 0, 255, 0.6) 20%,
    transparent 40%
  );
}

紫色の要素を確認したら、紫色から白(rgba(255, 255, 255, 0.6))にして、transform: translateX(-100%);で画面外に配置します。

CSS

.shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 20%,
    transparent 40%
  );
}

最後にanimationプロパティを追加して、左から右にアニメーションするように
「to { transform:translateX(100%) }」を適用すれば完成です。

CSS

.shimmer {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
  background-color: #eee;
}

.shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 20%,
    transparent 40%
  );
  animation: shimmer 1s infinite;
}

.shimmer-inner {
  padding: 12px;
  border-radius: 10px;
  background: #fff;
}

.shimmer-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #eee;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

動く白い要素を斜めにしたい場合

動く白い要素部分は縦になっているので、斜めにしたい場合はtransformにskewX(-45deg)を追加します。

CSS

.shimmer::before {
  /* 中略 */
  transform: translateX(-100%) skewX(-45deg);
  /* 中略 */
}

@keyframes shimmer {
  to {
    transform: translateX(100%) skewX(-45deg);
  }
}