【備忘録】簡単に作れるロード画面についてまとめ【HTML、CSS】

こんにちは！

久しぶりのプログラミング関係の記事です。

8月21日に展覧会のページを作成しました。
ほとんどコピペしてから、変えているのですが今回はロード画面を大きく変更しました。
割と簡単にできるロード画面なのですが、また変更する可能性があるので忘れないように備忘録を残します。

投票のプラグインのスタイルをいじったり、目次画面を追加したりしたのですが
投票のスタイルも基本的に変える必要はないし、目次画面もflexboxさえ理解出来手入れば
簡単にできるので、わざわざ備忘録に書く必要はないと思い残しません。

ちなみに展覧会のページはこちらです

ロード画面

See the Pen
loading-1 by 👓ならっち👓 (@naratch_)
on CodePen.

Now Loadingが点滅するロード画面です。

JavaScriptに以下を書き込むとロード後に本文が表示されます。

const spinner = document.querySelector('loading');
const main = document.querySelector('main');

window.addEventListener('load', stopload);
setTimeout('stopload()', 200000);

function stopload() {
  spinner.style.display = 'none';
  main.style.opacity = 1;
}

処理の流れとしては画面のロードが終わったら「stopload」を実行。
20秒経ってもロードが終わらなくても「stopload」を実行します。

stoploadの処理は
loding（spinner)を非表示
mainを透明度を0→1にし見えるようにしています。

今までのロード画面はこちらの

をコピペして一部いじって使っていました。

新しいロード画面

See the Pen
loading-2 by 👓ならっち👓 (@naratch_)
on CodePen.

CODEPENで簡単そうなのを見つけて
ちょっといじったものとなります。
また、今回は夏をテーマとした展覧会だったため浜辺をイメージした
ロード画面となっています。

JavaScriptは同じような感じでできるので割愛。
CSSの解説

.load {
  background: linear-gradient(
    #528dd9,
    #66b1f2,
    #77abd9,
    #fff 80%,
    #dac8a9,
    #735840
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

h1 {
  position: absolute;
  top: 55%;
  fontsize:2em;
  color: #fff;
  animation: blinking 1s infinite;
}

@keyframes blinking {
  0%,
  100% {
    color: #fff;
  }
  50% {
    color: transparent;
  }
}

#loading {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.7s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#mani {
  opacity: 1;
  transition: 1s;
}

親要素 load

親要素のloadにbackground: linear-gradientで背景をグラデーションにしています。

詳しくはCSS グラデーションの使用を見てみてください。

flexboxを使い子要素を縦並びで上下左右中央に来るようにしています。
100vhと100vwを指定することで画面幅いっぱいにしています。

子要素 h1

子要素の見出しは中央より少し下にしたかったのでtop:55%にしています。

アニメーションさせるためanimation: blinking 1s infinite;
keyframesのblinkingの処理を1秒間で無限に繰り返す処理です。

blinkingは最初と最後を白文字、50％（0.5s)の時に透明にして点滅しているようにしています。

子要素 loading

子要素のloadingは50pxの四角形に3pxの線をつけて透明度を0.3にしています。
border-radiusで円にして、線の上だけ、普通の線にしています。

アニメーションさせるためanimation: spin 0.7s ease-in-out infinite;
keyframesのspinの処理を0.7秒間で高速と減速を繰り返す処理です。
spinは0.7sで1回点するようになっています。

応用

親要素のload（loading)とJSのイベント処理を変えなければ
どんなロード画面でも作ることができると思います。

See the Pen
loading-3 by 👓ならっち👓 (@naratch_)
on CodePen.

アニメーションの処理に少し手を加えて上げるだけで
ゲーミングロード画面なんてのも作れます。（実用性皆無）

〆

ロード画面なんてコピペで済むからわざわざ備忘録に残す必要もないと思いましたが
新しく追加する時に迷いそうなので書いてみました。

書くだけでも、以外と頭に残るので勉強に非常にいいですね。

書いていて思ったのがロード画面を後付でも
HTMLに親要素と子要素の<div>タグを追加してあげて
親要素にposition fixedと100vh,100vw
子要素にposition: absolute;
さえ指定して上げれば何でも実装できると思いました。

そのうち、ロード画面を遊び感覚で作った
いくつかブログに載せたいですね。

というわで
それでは。