ローディングスピナーを作る方法!読み込み中にぐるぐる回る【コピペで使える】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. 大きな画像を読み込むウェブページ
    ローディングスピナーは大きな画像や動画など、ロードに時間がかかるコンテンツを持つウェブページに適しています。ユーザーにロード進行状況を視覚的に示すことができます。

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

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

記事を書いてる人

ガラケー時代からWEB開発やってる自宅SE です。

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

ネット事件簿チャンネルを運営しているので、YouTubeもぜひ覗いてみてください!!

雨おやじのSNSを覗く!!
JavaScript
雨おやじのSNSを覗く!!
ITkagyo

コメント