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

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

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

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>

３つの実用例