ローディングスピナーを作る方法!読み込み中にぐるぐる回る【コピペで使える】JavaScript、CSS、HTML

JavaScript

読み込み中にぐるぐる表示されてるのはローディングスピナーと言います。

今回の記事はコピペで使えるローディングスピナーです。

JavaScript

window.onload = function () {
    const loadingImage = document.getElementById('loadingImage');
    loadingImage.classList.add('visible');
    const spinner = document.getElementById('spinner');
    spinner.style.display = 'none';
}
  • window.onload
    このイベントはページ全体(画像やスクリプトなど全て)が読み込まれた時に発火します。ここではページが全て読み込まれたらローディングスピナーを非表示にします。

  • document.getElementById
    この関数は指定したidをもつHTML要素を取得します。このコードではローディングスピナーと画像の要素を取得しています。

  • classList.add
    要素のclassリストに新たにクラスを追加します。ここではロードされた画像にvisibleクラスを追加しています。

  • style.display
    要素の表示スタイルを操作します。ここではスピナーのdisplayプロパティをnoneに設定し、非表示にしています。

CSS

.img-wrapper {
    position: relative;
    max-width: 80%;
}

#spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('ローディングスピナーのアニメーション.gif') no-repeat center center;
    z-index: 9999;
}

#loadingImage {
    width: 100%;
    visibility: hidden;
}

#loadingImage.visible {
    visibility: visible;
}
  • .img-wrapper
    画像とスピナーの親要素です。子要素のスピナーが絶対位置を指定できるようにposition: relative;を指定しています。

  • #spinner
    ローディングスピナーを表示する要素です。position: absolute;と指定することで親要素の.img-wrapper内で自由に配置することが可能になります。また、背景画像としてスピナーのGIFを指定しています。

  • #loadingImage
    表示したい画像要素です。初期状態ではvisibility: hidden;と指定し、画像が非表示になっています。

  • #loadingImage.visible
    画像が読み込まれたらJavaScriptからこのクラスが追加され、visibility: visible;となります。これにより画像が表示されます。

HTML

<div class="img-wrapper">
    <div id="spinner"></div>
    <img id="loadingImage" src="表示させたい画像" alt="Loading Image">
</div>

3つの実用例

  1. 大きな画像を読み込むWebページ
    ローディングスピナーは大きな画像や動画など、ロードに時間がかかるコンテンツを持つWebページに適しています。ユーザーにロード進行状況を視覚的に示すことができます。

  2. APIからデータをフェッチするWebアプリケーション
    APIからデータを取得するWebアプリケーションにおいても、データが取得されるまでの間にローディングスピナーを表示することで、ユーザーに対して何か処理が進行中であることを示すことができます。

  3. JavaScriptによる非同期処理が含まれるWebページ
    非同期処理が含まれるWebページでは、処理が完了するまでに時間がかかる場合があります。この間にローディングスピナーを表示することで、ユーザー体験を向上させることができます。

YouTubeのチャンネル登録はこちら!!
ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
デプロイ太郎

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とX(旧Twitter)のフォローお願いします。デスマ上等!!

「コンテンツモンスターになり、モンスターコンテンツを生み出す!!」

デプロイ太郎のSNSを見てみる!!
JavaScript
デプロイ太郎のSNSを見てみる!!

コメント

タイトルとURLをコピーしました