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

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

HTML

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

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

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

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

CSS(スタイルシート)

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

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