指定時間後に終了する読み込み中アニメーションを作る方法
指定時間後に終了する読み込み中アニメーションを作る方法を紹介します。このサンプルでは、ページを開くと円形のローディングアニメーションが回転し、JavaScriptで指定した時間が経過すると自動で終了します。読み込み中の状態を一定時間だけ表示し、その後に完了したことを利用者へ分かりやすく伝えられます。
ファイルの読み込みやデータ処理を待っている画面、管理画面での処理状態、会員サイトやECサイトでの読み込み表示など、処理中であることを視覚的に伝えたい場面で利用できます。一定時間が経過するとアニメーションが停止して表示内容が切り替わるため、開始したまま回転し続けるローディングとは異なり、終了状態まで確認できるサンプルです。
HTMLでは読み込み中と終了後の表示内容を変更でき、CSSではローディングの大きさ、色、回転速度、余白、背景色、角丸などを調整できます。JavaScriptの待機時間を変更すれば、アニメーションが終了するまでの時間も自由に設定できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
しばらくお待ちください。
読み込み中アニメーションが3秒後に自動で終了します。「もう一度確認する」を押すと最初から動作を確認できます。
コードをコピーして使おう！
<!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-animation-auto-end_wrap">
<!-- 読み込みアニメーション -->
<div
class="loading-animation-auto-end_loader"
id="loading-animation-auto-end-loader">
</div>
<!-- タイトル -->
<div
class="loading-animation-auto-end_title"
id="loading-animation-auto-end-title">
読み込み中
</div>
<!-- 説明文 -->
<p
class="loading-animation-auto-end_text"
id="loading-animation-auto-end-text">
しばらくお待ちください。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは円形の読み込み中アニメーション、タイトル、説明文を配置し、CSSではローダーの回転アニメーションやサイズ、色、余白などを設定します。JavaScriptではページ表示から3秒後に回転を終了し、「読み込み中」から「読み込み完了」へ表示内容を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは読み込み表示全体を構成するファイルです。円形のローダー、「読み込み中」のタイトル、「しばらくお待ちください。」の説明文を配置しています。タイトルや説明文を変更すると、読み込み中に表示する文章を用途に合わせて変更できます。
style.cssは読み込み表示のデザインと回転アニメーションを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、ローダーの大きさや色、回転速度などを変更できます。@keyframesで0度から360度まで回転させ、animationによって回転を繰り返しています。終了時にはis-finishedクラスによってanimation:none;が適用され、回転が停止します。
script.jsは指定時間後に読み込み中アニメーションを終了するファイルです。ページ表示から3000ミリ秒後にis-finishedクラスを追加して回転を停止し、タイトルを「読み込み完了」、説明文を「読み込みが完了しました。」へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。ページを開くと円形のローダーが回転を開始し、3秒が経過すると自動で回転が終了します。同時にタイトルと説明文が読み込み完了を示す内容へ切り替わります。
カスタマイズできる内容
index.htmlでは「読み込み中」のタイトルと「しばらくお待ちください。」の説明文を変更できます。用途に合わせて、処理中や準備中などの文章へ変更できます。
style.cssでは読み込み表示全体の横幅、余白、背景色、枠線、角丸、ローダーの大きさ、線の太さ、色、回転速度を変更できます。また、終了状態のborder-color:#d1d5db;を変更すると、回転停止後のローダーの色を変更できます。
script.jsではsetTimeoutの3000を変更することで、読み込み中アニメーションが終了するまでの時間を調整できます。終了後に表示する「読み込み完了」と「読み込みが完了しました。」の文章もscript.jsから変更できます。
数値調整
style.css
max-width:420px;
読み込み表示全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
読み込み表示全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:48px 24px;
読み込み表示全体の内側余白です。48pxは上下、24pxは左右の余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
読み込み表示全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:64px;・height:64px;
円形ローダーの大きさです。値を大きくするとローダーが大きくなり、小さくすると小さくなります。
margin:0 auto 20px;
ローダー下側の余白です。20pxを大きくするとタイトルとの間隔が広がり、小さくすると狭くなります。
border:6px solid #dbeafe;
円形ローダーの線です。6pxを大きくすると線が太くなり、小さくすると細くなります。
animation:loading-animation-auto-end_spin 1s linear infinite;
ローダーが1回転する時間です。1sは1秒を表します。値を大きくするとゆっくり回転し、小さくすると速く回転します。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
script.js
3000
読み込み中アニメーションを終了するまでの時間です。3000は3秒を表します。値を大きくすると終了までの時間が長くなり、小さくすると早く終了します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:420pxによって、画面幅に合わせて読み込み表示全体の横幅が調整されます。また、画面幅640px以下ではpadding:32px 18px;へ変更して内側余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント