基本の読み込み中アニメーションを作る方法
基本の読み込み中アニメーションを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、円形のアニメーションが回転するシンプルな読み込み中表示を作成します。JavaScriptを使用しないため構成が分かりやすく、Web制作を学び始めた方でも導入しやすい内容になっています。
データの取得中や画面の切り替え時、処理が完了するまで待機していることを利用者へ伝えたい場面で活用できます。お問い合わせ画面の送信処理中、管理画面のデータ読み込み、会員サイトの画面切り替え、ECサイトの商品情報取得中など、さまざまなWebサイトで利用しやすい基本的な読み込み中アニメーションです。
タイトルや説明文はHTMLから変更でき、CSSではアニメーションのサイズ、色、枠線の太さ、回転速度などを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、読み込み中の状態を分かりやすく表示したい場合の基本サンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
しばらくお待ちください。
円形の読み込み中アニメーションが回転する様子を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8に設定 -->
<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="basic-loading-animation_wrap">
<!-- 回転する円形アニメーション -->
<div class="basic-loading-animation_loader"></div>
<!-- 読み込み中のタイトル -->
<div class="basic-loading-animation_title">
読み込み中
</div>
<!-- 読み込み中の説明文 -->
<p class="basic-loading-animation_text">
しばらくお待ちください。
</p>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは読み込み中アニメーションを表示するための要素を配置し、CSSでは円形アニメーションの見た目や回転処理を設定しています。JavaScriptを使用せず、CSSだけで動作するため、シンプルな構成で導入しやすいサンプルです。
HTMLではタイトルや説明文など表示する内容を管理し、CSSでは円のサイズ、色、枠線の太さ、余白、文字サイズ、回転速度などを設定しています。ファイルごとに役割を分けているため、表示内容とデザインを個別に編集できます。
Webサイトの画面切り替え時やデータ取得中など、処理が完了するまで利用者へ待機中であることを伝えたい場面で利用できます。HTMLとCSSだけで動作するため、既存サイトへ組み込みやすく、初心者でも扱いやすい基本的な読み込み中アニメーションです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
読み込み中アニメーション全体を構成するファイルです。タイトルや説明文など、画面へ表示する文章を変更できます。
style.css
読み込み中アニメーションのデザインを設定するファイルです。円のサイズ、色、枠線の太さ、余白、文字サイズ、回転速度などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。円形の読み込み中アニメーションが表示され、CSSアニメーションによって繰り返し回転します。
カスタマイズできる内容
index.htmlではタイトルや説明文を自由に変更できます。「読み込み中」「処理中」「データを取得しています」など、用途に合わせた文章へ変更できます。
style.cssでは全体の横幅、余白、背景色、円のサイズ、枠線の太さ、色、文字サイズ、回転速度などを自由に変更できます。
数値調整
style.css
max-width:420px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:48px 24px;
全体の内側余白です。上下48px、左右24pxです。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:64px; / height:64px;
円形アニメーションの大きさです。値を大きくすると円が大きくなり、小さくするとコンパクトになります。
border:6px solid ...
円の枠線の太さです。6pxを大きくすると太くなり、小さくすると細くなります。
margin:0 auto 20px;
円形アニメーションの下側余白です。20pxを大きくするとタイトルとの間隔が広がり、小さくすると近づきます。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さく表示されます。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
animation:basic-loading-animation_spin 1s linear infinite;
1sは円が1回転するまでの時間です。値を大きくするとゆっくり回転し、小さくすると速く回転します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%;とmax-width:420px;によって画面幅に応じて横幅が自動で調整されます。また、@media (max-width:640px)ではmargin:24px auto;とpadding:32px 18px;へ変更し、スマートフォンでは余白を小さくして見やすく表示します。スマートフォン・タブレット・PCで利用できます。
コメント