読み込み中の仮表示アニメーションを作る方法【HTML/CSS・サンプルコード付き】

ローディング

読み込み中の仮表示アニメーションを作る方法

読み込み中の仮表示アニメーションを作る方法を紹介します。本記事では、HTMLとCSSを使って、コンテンツの読み込み前に画像やテキストの仮表示を出すアニメーションを作成します。実際の内容が表示される前にレイアウトの形を見せることで、読み込み中であることをユーザーへ分かりやすく伝えられます。

このサンプルコードでは、カード型のレイアウトを想定し、画像エリアやテキスト行の代わりに薄いグレーの仮表示を配置します。さらに、CSSアニメーションで光が左から右へ流れるように動かし、読み込み中の状態を自然に表現します。このような表現は、スケルトンスクリーンやスケルトンローディングとも呼ばれます。

読み込み中の仮表示アニメーションは、記事一覧、商品一覧、プロフィールカード、画像付きコンテンツなどでよく利用されます。読み込み完了まで真っ白な画面を表示するよりも、どのような内容が表示されるのかを先に伝えられるため、ユーザーにとって待ち時間を感じにくいUIを作成できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

コンテンツが表示される前に仮の画像やテキストを表示し、光が左から右へ流れることで読み込み中であることを表現しています。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>読み込み中の仮表示アニメーション</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 仮表示エリア -->
  <div class="loading-placeholder-animation_wrap">

    <!-- カード -->
    <div class="loading-placeholder-animation_card">

      <!-- 画像の仮表示 -->
      <div class="loading-placeholder-animation_image"></div>

      <!-- タイトルの仮表示 -->
      <div class="loading-placeholder-animation_line loading-placeholder-animation_title"></div>

      <!-- 本文1行目の仮表示 -->
      <div class="loading-placeholder-animation_line loading-placeholder-animation_medium"></div>

      <!-- 本文2行目の仮表示 -->
      <div class="loading-placeholder-animation_line loading-placeholder-animation_medium"></div>

      <!-- 本文3行目の仮表示 -->
      <div class="loading-placeholder-animation_line loading-placeholder-animation_short"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLには画像やタイトル、本文の代わりとなる仮表示エリアを配置し、CSSで光が左から右へ流れる読み込み中アニメーションを作成します。JavaScriptは使用せず、HTMLとCSSだけで実装できます。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。光が流れる速さは animation の時間を変更すると調整できます。また、仮表示のサイズや形は width、height、border-radius を変更することで、記事一覧や商品一覧など用途に合わせたレイアウトへカスタマイズできます。

コメント