Gifアニメなしでローディングスピナーを作る方法

JavaScript

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

今回の記事はgifを使用しないCSSだけで表示するローディングスピナーです。

JavaScript

window.onload = function () {
    const loadingImage = document.getElementById('loadingImage');
    loadingImage.classList.add('visible');
    const spinner = document.getElementById('spinner');
    spinner.style.display = 'none';
}

• ローディング画像要素の取得
  const loadingImage = document.getElementById('loadingImage');を用いて、HTML内に設定したidが’loadingImage’のimg要素を取得します。その結果をloadingImageという定数に格納します。これにより、JavaScriptからこのimg要素を操作することが可能になります。

• 画像の表示
  取得したimg要素にvisibleクラスを追加します。loadingImage.classList.add('visible');これにより、画像が表示されます。

• スピナー要素の取得と非表示設定
  const spinner = document.getElementById('spinner');を用いて、HTML内に設定したidが’spinner’のdiv要素を取得し、その表示を非表示にします。spinner.style.display = 'none';

CSS

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

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

#spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    z-index: 9999;
}

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

#loadingImage.visible {
    visibility: visible;
}

• 画像ラッパーのスタイリング
  .img-wrapperは画像のラッパー要素に適用されるCSSです。ここでは、位置を相対的にし、最大幅を80%に設定しています。

• スピナーのスタイリング
  #spinnerはローディングスピナーの要素に適用されるCSSです。絶対位置を使用し、四隅からの位置を0に設定して、親要素に対して中央に配置しています。さらに、ボーダー、幅、高さなどを設定し、スピナーのアニメーションを作成しています。

• 画像の表示制御
  #loadingImageと#loadingImage.visibleは画像の表示を制御します。デフォルトでは画像は非表示に設定(visibility: hidden;)されており、visibleクラスが追加されると表示(visibility: visible;)されます。

HTML

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

• 画像ラッパーの設定
  div class="img-wrapper"は画像とスピナーを包むラッパー要素です。CSSで定義したスタイリングがここに適用されます。

• ローディングスピナーの設定
  div id="spinner"はローディングスピナーの要素です。CSSで定義したスタイリングがここに適用されます。

• 画像の設定
  img id="loadingImage"は読み込む画像の要素です。CSSで定義したスタイリングがここに適用されます。

3つの実用例

使いすぎに注意！ユーザー体験を妨げないように。
必要以上に複雑なデザインは避け、シンプルに保つことが重要です。