Webサイトのローディングアニメーションの実装

お久しぶりです。

けんたです。

緊急事態宣言が解除されて、いかがお過ごしでしょうか？

私は、リモートの授業というものに人生初参加しておりまして、オンオフの切り替え、モチベーション維持に四苦八苦しております（笑）

さて、話は本題へ。

本日は、WEBサイトで重要な要素であるローディングアニメーションの実装の仕方をまとめました。

サイトに入った瞬間に、始まるグルグルしたやつです。

この実装、以外に簡単なんです↓

手順

では、手順ですが。

ーーーーーーーーーーーーーーーーーーーーーーーーーー

１．フリーのGif画像をダウンロード

２．コンテンツを非表示

３．読み込みが完了したら、Gif画像を隠して、コンテンツを表示

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

これだけです。簡単でしょ？

詳しく行きましょう。

詳細説明

手順１については、こことかいいと思います。

手順2です。

## HTML

<div id="showloading">
   <img src="animationGifs/images/icon_loader_b_bb_01_s1.gif">
</div>

<div id="contents" class="hidden">
   <img src="../dynamic-portfolio/image/new-mountain2.jpg" alt="">
</div>

これが、HTMLの部分です。

2つのdivが用意されていると思いますが、上がGifを格納する領域で、下がWEBサイトのコンテンツを格納する領域です。

下記のCSSでコンテンツ全てを非表示にしています。

## CSS

   .hidden{
       display: none;
   }

それ以外のCSSの設定で、画面中央にGifを表示する実装をしています。

## それ以外のCSS

   #showloading {
       width: 100%;
       height: 100vh;
       background-color: #fff ;
       position: relative;
   }

   #showloading  img{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

手順3では、Gifの非表示、コンテンツの表示を行います。本来だと、、

画面の読み込みが完了したら、表示の切り替えをして終わりです。

## 生JavaScript

window.onload = function(){
    //指定したIDのコンテンツを取得
    var contents = document.getElementById("contents");
    var loading = document.getElementById("showloading");
    //Gifの非表示
    loading.style.display = "none";
    //コンテンツの表示
    contents.style.display = "block";
}

ですが、今回はローカルでのテストなので少し工夫します。

window.onload = function(){
    setTimeout(function(){
        var contents = document.getElementById("contents");
        var loading = document.getElementById("showloading");
        loading.style.display = "none";
        contents.style.display = "block";
    },2000);
};

setTimeoutという関数を利用して、2秒後に処理を発火させています。

以上で完成です。

お疲れさまです。

今回作った、デモファイルを載せておきます。

Gif画像のパスは適宜変えてください。

top.html

1.09 KB

ファイルダウンロードについて

ダウンロード

Gif画像の作り方

あ、最後に今回のでも動画Gifは、gifsというWEBサービスで作らせていただきました。フリップを入れたり、長さを調整したり便利なので是非使ってみてください。(※会員登録必須)

では、今日はこの辺りで。