【DAY23】Loading画面の作成

はじめに

Webアプリケーションを作成したのですが、画像を表示する時などのロード時間が気になりました。そこで、ローディング画面を作成し、ロード中であることが視覚的に分かりやすくしようと考えました。
ローディング画面実装に、以下のサイトを使用しました。
https://loading.io/
また、以下の本を参考にしました。
1冊ですべて身につくJavaScript入門講座

ローディング画像の選択

https://loading.io/
こちらのサイトで、APNGのローディング画像を取得しました。

HTML、CSS、JSの記述

まず、bodyタグの一番上に以下のコードを記述しました。

<div id="loading">
    <img class="loading-img" src="{{ asset('loading.png') }}" alt="">
</div>

srcのところには取得したローディング画像のパスを指定してください。私はLaravelで開発をしているので、asset()へルパを使用した少し特殊な記述となっています。

style.css

#loading {
    transition: all 1s;
    background-color: #fff;
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
}
.loading-img {
    width: 200px;
    height: 200px;
}
.loaded {
    opacity: 0;
    visibility: hidden;
}

loadedというクラスは、JSにてロードができた時にdivタグに追加します。

loading.js

const loading = document.querySelector('#loading');

window.addEventListener('load', () => {
    loading.classList.add('loaded');
});

これで一通りの処理が書けました。
ここで、ロード画面を半透明にしたいと考え、#loadingにopacityプロパティを追加しました。

style.css

#loading {
    opacity: 0.5;
}

しかし、opacityを指定するとtransitionが効かなくなり、1秒かけてフェードアウトしていたローディング画面が瞬時にフェードアウトするようになってしまいました。
結局明確な原因は分かりませんでしたが、background-colorをrgbaで記述して背景を半透明に指定することで解決しました。

style.css

#loading {
    transition: all 1s;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
}

背景を半透明に指定する方法で実装する場合は、ローディング画像の背景が透明でなければいけないので、最初に取得するローディング画面も背景が透明なものにしておきましょう。

これでローディング画面が実装できました。