読み込み中...

HTMLで作るローディングアニメーションの全手法10選

HTMLローディングアニメーションの作成方法とカスタマイズ例 HTML
2024.04.21
この記事は約17分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

ウェブ開発のスキルを向上させたい皆さん、特にフロントエンドの領域でより専門的な知識を身につけたいと考えている方々にとって、今回の記事が大変役立つことでしょう。

この記事では、HTMLとCSSを使用して魅力的なローディングアニメーションを作成する方法を、基本から応用まで段階を追って詳しく解説していきます。

初心者の方でも理解しやすいように、具体的なサンプルコードとその解説を交えながら進めていくので、実際のプロジェクトにもすぐに活用できる知識が得られるはずです。

●HTMLでローディングアニメーションを作る基本

まずは、HTMLとCSSを使ってシンプルなローディングアニメーションを作成する基本的な方法から見ていきましょう。

ローディングアニメーションは、ウェブサイトのロード時間にユーザーが退屈しないようにするための視覚的な工夫です。

ここでは、基本的なHTML構造とCSSアニメーションのコードを使って、簡単ながらも効果的なアニメーションを作成する方法を紹介します。

○基本の構造と重要なCSSプロパティ

ローディングアニメーションの基本となるHTML構造は非常にシンプルです。

たとえば、divタグを使ってアニメーションを表示するエリアを定義し、CSSでスタイルを適用します。

ここで重要なCSSプロパティはanimationです。

これを使用して、キーフレームとアニメーションの持続時間、繰り返し回数などを定義することができます。

○サンプルコード1：シンプルな円形ローディングアニメーション

次に、基本的な円形のローディングアニメーションを作成してみましょう。

このHTMLとCSSコードは、中央に回転する円を表示する簡単な例です。

<div class="loader"></div>
.loader {
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

このコードは、divタグで定義されたローダーに対して、border-radiusを50%に設定して円形にし、animationプロパティで無限に回転するアニメーションを適用しています。

○サンプルコード2：バー形状のプログレスインジケータ

プログレスバーはもう一つの一般的なローディングアニメーションです。

このサンプルでは、水平方向に伸びるプログレスバーを作成しています。

<div class="progress-bar"></div>
.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #3498db;
  animation: load 5s ease-out infinite;
}

@keyframes load {
  0% { width: 0%; }
  100% { width: 100%; }
}

この例では、初期状態のwidthを0%に設定し、5秒かけて100%まで広がるアニメーションを加えています。

ease-outタイミング関数は、動きが徐々に遅くなることで自然な動きを作り出しています。

○サンプルコード3：複数要素を使った動的アニメーション

最後に、複数のHTML要素を組み合わせて動的なアニメーションを作成する例を見てみましょう。

このサンプルでは、複数のdivを使って動的に変化するローディングアニメーションを実装します。

<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
.loader {
  display: flex;
  justify-content: space-around;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: jump 0.6s ease-in-out infinite alternate;
}

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

各ドットにjumpキーフレームアニメーションを適用することで、上下に跳ねる効果を作り出しています。

alternateを指定することでアニメーションが前後に動くことなく繰り返されます。

ここまでの説明で、HTMLとCSSだけで様々なタイプのローディングアニメーションを作る方法をご理解いただけたかと思います。次のセクションでは、これらの基本技術を応用して、さらに高度なカスタマイゼーション方法を学んでいきましょう。

●ローディングアニメーションのカスタマイズ方法

ローディングアニメーションのカスタマイズは、ウェブサイトのブランドに合わせたり、特定のユーザー体験を向上させたりするために重要です。

ここでは、色や速度、さらにはJavaScriptを使用したインタラクティブな動きの組み合わせについて説明します。

具体的な例を通じて、これらのカスタマイズ方法を掘り下げていきます。

○サンプルコード4：色や速度を調整する方法

色や速度の調整は、CSSのプロパティを変更するだけで簡単に行えます。

このサンプルコードでは、ローディングアニメーションの色と速度を変えています。

<div class="loader"></div>
.loader {
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #e74c3c;  /* 色を変更 */
  border-radius: 50%;
  animation: spin 1s linear infinite;  /* 速度を変更 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

このコードでは、ローダーの色を#e74c3cに変更し、アニメーションの周期を1秒に短縮しています。

これにより、より速く回転する動きが得られます。

○サンプルコード5：CSSアニメーションとJavaScriptの組み合わせ

CSSだけでなく、JavaScriptを使ってアニメーションの挙動を制御することも可能です。

この例では、ボタンクリックに応じてローディングアニメーションを開始または停止しています。

<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
<div class="loader" id="loader"></div>
.loader {
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
function startAnimation() {
  document.getElementById('loader').style.animationPlayState = 'running';
}

function stopAnimation() {
  document.getElementById('loader').style.animationPlayState = 'paused';
}

このJavaScriptを使用することで、ユーザーはアニメーションを制御できるようになります。

これにより、インタラクティブなユーザー体験を提供できるようになります。

○サンプルコード6：ユーザーの操作に反応するアニメーション

最後に、ユーザーのスクロール操作に反応して動くアニメーションの例を見てみましょう。

このコードでは、ユーザーがページをスクロールすると、アニメーションが進行するように設計されています。

<div class="scroll-loader" id="scrollLoader"></div>
.scroll-loader {
  width: 100%;
  height: 5px;
  background-color: #3498db;
  position: fixed;
  top: 0;
  left: 0;
  transition: width 0.5s ease;
}
window.onscroll = function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById('scrollLoader').style.width = scrolled + "%";
}

このスクリプトは、ページのスクロール位置に基づいてローダーの幅を動的に調整します。

ユーザーがページをスクロールすると、ローダーの幅が徐々に広がっていきます。

●よくある問題と対処法

ローディングアニメーションの導入にあたっては、いくつかの一般的な問題が発生する可能性があります。

それぞれの問題に対して、具体的な解決策を提案します。

これにより、より快適で効果的なウェブサイトのユーザー体験を実現することができます。

○問題1：アニメーションが表示されない

アニメーションが表示されない場合、最も一般的な原因はCSSプロパティの設定ミスやHTMLの構造エラーです。

次の点を確認してください。

  1. CSSのセレクタが正しいかどうか。特にクラス名やIDが正確にHTML要素と一致しているかを確認します。
  2. アニメーションプロパティが正しく設定されているか。特にanimation-nameがキーフレームと一致しているかを確認します。
  3. ブラウザの開発者ツールを使用して、CSSが正しく適用されているかを確認します。問題があれば、即座に修正します。

このように問題を解決できることが多いですが、それでも解決しない場合は、CSSの再読み込みやブラウザのキャッシュクリアが有効です。

○問題2：ブラウザの互換性問題

異なるブラウザ間でアニメーションが正しく表示されない場合があります。

この問題に対処するためには、下記の方法が効果的です。

  • CSSプレフィックスを使用する
  • ポリフィルやJavaScriptライブラリを利用する
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

.loader {
  -webkit-animation: spin 1s linear infinite;
}

これにより、SafariなどのWebkitを使用するブラウザでもアニメーションがスムーズに動作するようになります。

○問題3：パフォーマンスの最適化

アニメーションが原因でページのパフォーマンスが低下することがあります。

パフォーマンスを最適化するためには、次のような方法を採用しましょう。

  • will-changeプロパティの使用
  • アニメーションの複雑性を低減する
.loader {
  animation: spin 1s

 linear infinite;
  will-change: transform;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

このようにwill-changeを適切に使用することで、ブラウザがアニメーションのレンダリングをより効率的に行うことが可能です。

●HTMLローディングアニメーションの応用例

HTMLとCSSを使用したローディングアニメーションの応用例を通じて、さまざまなシナリオでの利用方法をご紹介します。

このテクニックをマスターすることで、ユーザー体験を向上させ、よりプロフェッショナルなウェブサイトを構築することができます。

○サンプルコード7：ロード完了時にアニメーションを終了する方法

ローディングアニメーションは、ページのコンテンツが完全にロードされた後に停止する必要があります。

JavaScriptを使用して、このタイミングを制御する方法を紹介します。

<div id="loader"></div>
#loader {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
window.addEventListener('load', function() {
  document.getElementById('loader').style.display = 'none';
});

このコードは、ウィンドウが完全にロードされたときにloadイベントをリッスンし、ローディングアニメーションを非表示にします。

○サンプルコード8：背景としてアニメーションを利用する方法

ローディングアニメーションをページの背景に設定し、ユーザーがコンテンツを読み込む間、視覚的に楽しめるようにする方法です。

<div class="background-loader"></div>
.background-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.8));
  animation: fadeInOut 5s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

この設定により、ページ全体がフェードイン・アウトする背景アニメーションが適用されます。

○サンプルコード9：非同期データ読み込みとの連携

Ajaxを使用してデータを非同期に読み込む際、ローディングアニメーションを表示することで、データロード中もユーザーがページから離れないようにします。

<div id="loader"></div>
#loader {
  display: none; /* 初期状態では非表示 */
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
function fetchData() {
  document.getElementById('loader').style.display = 'block';
  fetch('data/url')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      document.getElementById('loader').style.display = 'none';
    });
}

このJavaScript関数は、データのフェッチを開始するときにローダーを表示し、データがロードされたら非表示にします。

○サンプルコード10：複雑なアニメーションパターンの実装

複数のアニメーション効果を組み合わせて、複雑なローディングアニメーションを作成する方法を紹介します。

<div class="complex-loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
css
.complex-loader {
  display: flex;
  justify-content: space-between;
  width: 50px;
  animation: moveInOut 3s linear infinite;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: scaleUp 3s ease-in-out infinite;
}

@keyframes moveInOut {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

@keyframes scaleUp {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

この例では、ドットが左右に動きながらサイズが変わる複雑なアニメーションを実装しています。

複雑な動きは、ローディング時間が長い処理に適しており、ユーザーの注意を引きつけます。

●エンジニアなら知っておくべき豆知識

ウェブ開発において、効果的なアニメーションはユーザーの体験を大いに向上させることができます。

ここでは、特に知っておくべきアニメーションに関するテクニックや小技を紹介します。

この情報を活用することで、さらに洗練されたウェブデザインを実現することができるでしょう。

○豆知識1：アニメーションのパフォーマンスを高めるCSSの技

アニメーションのパフォーマンスを向上させるには、適切なCSSプロパティの利用が重要です。

特にtransformとopacityのアニメーションは、パフォーマンスに負担をかけにくいため、活用すると良いでしょう。

ここでは、パフォーマンスを考慮したアニメーションの例を見てみましょう。

.fade-in-element {
  animation: fadeIn 1s ease-out;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

このコードは、要素の透明度を0から1へと変化させるシンプルなフェードイン効果を実現します。

CSSのopacityプロパティはGPUで加速されることが多いため、この種のアニメーションは効率が良く、滑らかです。

○豆知識2：JavaScriptを使わずにアニメーションを制御する方法

JavaScriptに頼らずとも、CSSのみでアニメーションの開始や停止を制御する方法があります。

このテクニックは、特に静的なサイトやJavaScriptを極力減らしたい場合に便利です。

<div class="hover-animation"></div>
.hover-animation {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.3s;
}

.hover-animation:hover {
  transform: scale(1.5);
}

このCSSコードは、ユーザーが要素にマウスカーソルを合わせたときに、要素を1.5倍に拡大するアニメーションを実行します。

:hover疑似クラスを使えば、JavaScriptを使わずに状態に応じたアニメーションを実装することができます。

CSSのみで完結するアプローチは、ページのパフォーマンスを損なうことなく、動的なフィードバックをユーザーに提供する効果的な方法です。

まとめ

この記事を通じて、HTMLとCSSだけを使って多様なローディングアニメーションをデザインする方法について解説しました。

初心者でも扱いやすいサンプルコードを用いて、基本から応用まで段階的に解説しました。

JavaScriptを使わないアプローチも掘り下げ、アクセス性の高いウェブサイト作りに役立つ技術を紹介しました。

これらの知識を活用して、訪問者の注意を引きつけ、ウェブサイトのユーザー体験を向上させることができるでしょう。

どうぞこれからのプロジェクトにお役立てください。