2021/02/18

CSSとJavaScriptでのローディング画面の作り方【現役エンジニア解説】

PROGRAM

今回は、CSSとJavaScriptでのローディング画面の作り方について、HTMLとCSS、JavaScriptに分け、簡単に解説していきます。

HTML

HTMLでは、ローディング用のブロック要素を用意します。

このブロック要素にはidを付け、JavaScriptから操作できるようにします。

<div id="loading"></div>
<div>メインコンテンツ</div>

上記のコードでは、loadingのidを付けたブロック要素であるdiv要素を用意しています。

CSS(スタイルシート)

CSSでは、ローディング用のブロック要素で画面を覆うようにさせます。

また、ロード完了後のローディング画面用に要素を非表示にするクラスを用意します。

#loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:2147483647;
    transition:all 1s;
    background-color:blue;
}
.loaded{
    opacity:0;
    visibility:hidden;
}

上記のコードでは、loadingというidの要素にローディング画面用のスタイルを、loadedというクラスの要素に要素を非表示にするスタイルを指定しています。

JavaScript(スクリプト)

JavaScriptでは、ロード完了後にローディング画面用の要素を非表示にさせます。

ローディング画面用の要素に、要素を非表示にするクラスを追加し、ローディング画面を非表示にします。

window.onload = function(){
    var loading = document.getElementById('loading');
    loading.classList.add('loaded');
}

上記のコードでは、ページのロード完了後に発火するonloadイベントで、loadingというidを持つローディング画面用の要素に、要素を非表示にするloadedというクラスを追加し、ローディング画面を非表示にする設定をしています。

• facebook
• Tweet
• Read Later