左から右へ伸びる読み込み中アニメーションを作る方法【HTML/CSS・サンプルコード付き】 

ローディング

左から右へ伸びる読み込み中アニメーションを作る方法

左から右へ伸びる読み込み中アニメーションを作る方法を紹介します。本記事では、HTMLとCSSを使って、バーが左から右へ伸び、再び左へ戻る読み込み中アニメーションを作成する方法を解説します。実際の進捗率を表示するプログレスバーではなく、処理中であることをユーザーへ視覚的に伝えるためのローディングアニメーションです。

このサンプルコードでは、CSSアニメーションを利用してバーが左端を起点に右方向へ伸びる動きを実装しています。JavaScriptを使用せず、HTMLとCSSだけで実装できるため、ページの読み込み中、Ajax通信中、フォーム送信中など、さまざまな場面で手軽に利用できます。バーの色や高さ、長さ、アニメーション速度もCSSだけで自由に変更できます。

このような読み込み中アニメーションは、実際の処理時間が分からない場合でも、処理が継続していることをユーザーへ分かりやすく伝えられます。シンプルな構成で導入しやすく、WebサイトやWebアプリのローディング演出として幅広く活用できるサンプルです。

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

デモ

読み込み中

バーが左から右へ伸びる読み込み中アニメーションです。

transform:scaleX() と transform-origin:left center; を使うと、バーを右方向へ伸ばせます。

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

<!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-bar-expand-contract_wrap">

    <!-- 表示テキスト -->
    <p class="loading-bar-expand-contract_text">
      読み込み中
    </p>

    <!-- バーの背景 -->
    <div class="loading-bar-expand-contract_track">

      <!-- 伸縮するバー -->
      <div class="loading-bar-expand-contract_bar"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにバー本体と背景を配置し、CSSアニメーションでバーが左から右へ伸び、再び左へ縮む読み込み中アニメーションを作成します。JavaScriptは使用せず、HTMLとCSSだけで実装できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。バーの動く速さは animation の時間を変更すると調整できます。また、バーの伸びる起点は transform-origin で変更できます。例えば left center にすると左から右へ伸び、center にすると中央から左右へ伸びるアニメーションになります。

コメント