【HTML/CSS/JS】シンプルなローディング画面の実装

2024年2月28日2024年4月27日

URLをコピーしました！

目次（クリックでジャンプ）

シンプルなローディング画面の実装

ページ読み込み時にローディングのアニメーションが表示され、ページの読み込み終了後に非表示になるアニメーションです。

一生ローディングが終わらないなどの事態を避ける為、10秒経過で強制的に非表示になるようにしています。
ヒートマップツール（Clarity）等でも正しく表示されるようになっています。

シンプルなローディング画面のコード

HTML

ローディング画像はgifを使用しています。
ローディングgifは以下のサイトで簡単に作成できるため、適宜好きなローディングgifやsvgを用意してください。

あわせて読みたい

loading.io – Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG / LOTTIE / MP4!

もしくは以下のサイトで既存のGIFをダウンロードして使うのもおすすめです。

Preloaders.net

Preloaders.net – Loading GIF, SVG & APNG (AJAX loaders) generator More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery

LottieFiles

Free Loading Animations | LottieFiles Discover a world of creativity with free Loading animations at LottieFiles. Download now in various formats including Lottie JSON, dotLottie, MP4, and more for …

<div class="js_curtain">
    <img class="js_curtain_loading" src="https://kizineko.com/wp-content/themes/swell_child/assets/img/loading.gif" alt="">
</div>

CSS（SCSS）

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、下のリンクのようなツールで変換を行ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.js {
  &_curtain {
    width: 100vw;
    height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    &_loading {
      width: 10rem;
      height: 10rem;
    }
  }
}

Javascript

function loadingAnimation() {
        window.addEventListener('load', function() {
            //ページ読み込み終了で非表示
            document.querySelector(".js_curtain").style.display = "none";
        });
        document.addEventListener("DOMContentLoaded", function() {
            //10秒経過で強制的に非表示
            setTimeout(function(){ document.querySelector(".js_curtain").style.display = "none"},10000);
        });
    }
loadingAnimation();