ローディング画面実装

#行ったこと

• ローデング画面の実装

#コード

HTML

<!-- ローディング用 -->
<div id="loading">
<!-- ローディング中に表示する画像-->
  <img src="example.gif" alt="loading">
</div>

<!-- コンテンツ-->
<div id="contents" class="hidden">
  <h1>example</h1>
</div>

CSS

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

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

.hidden {
display: none;
}

JavaScript

// ローディング画面のdivを取得
const loading = document.getElementById('loading');
const contents = document.getElementById('contents');

window.addEventListener('load', function () {
loading.style.display = 'none';
contents.classList.remove('hidden');
});

#プラグイン(pace.js)を使用する場合

• pace.js
  https://github.hubspot.com/pace/docs/welcome/
  https://cdnjs.com/libraries/pace

• CDNでpace.jsと使いたいテーマのcssをheadに記述のみ

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />