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

CSS

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つの実用例

Webページの読み込み待ち時間の視覚化

ユーザーがページの読み込みを待つ間、ローディングスピナーを表示して視覚化することで、ユーザー体験を向上させることができます。

重い画像や動画の読み込み中に表示

サイト内で重い画像や動画を読み込む際、ローディングスピナーを表示することで、ユーザーに対してコンテンツの読み込みが進行中であることを明示的に伝えることができます。

非同期処理の実行中に表示

非同期処理が実行中であることをユーザーに示すために、ローディングスピナーを表示することができます。これにより、ユーザーはシステムがまだ処理を進行していることを理解し、適切な期待を持つことができます。

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

YouTubeのチャンネル登録はこちら!!
( *ˊᵕˋ)σ 凸ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
病根のバグ

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

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

病根のバグのSNSを覗く!!
CSS
病根のバグのSNSを覗く!!
ITkagyo

コメント

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