😇

【Javascript】くるくるローディング画面

2022/07/18に公開

JavaScript

tech

学習後のアウトプットとして記述しています。
何か間違いがありましたら、ご指摘頂けると幸いです。

開発環境

vscord
windows10

実装画像

実装

最初に実装コード全て記述しています。
詳しい説明は全コードの下に記述しています。
index.html

<div class="loading">
  <span class="circle"></span>
</div>

style.css

body {
  margin: 0;
  padding: 0;
}
.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #fdfdfd;
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
  trasition: opacity 500ms;
}
.loading.circle {
  display: block;
  position: relative;
  top: cacl(50% - 20px);
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  boder-top: 7px solid #fffccc;
  boder-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal both;
}
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

※今回は、index.htmlの<body>タグ中に記述しています。
<script>
  const loading = document.querySelector('.loading');
  window.addEventListener('load', () => {
    loading.classList.add('hide');
  }, false);
</script>

解説

index.html

<div class="loading">
  <span class="circle"></span>
</div>

htmlは、くるくるローディングの見た目を作成しています。

style.css

body {
  margin: 0;
  padding: 0;
}

全体の設定をしています。
bodyはもともとデフォルトでmarginとpaddingがあたっているので、デフォルトを消しておきます。

.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #fdfdfd;
}

ローディングの背景部分を実装しています。

.loading.hide {
  opacity: 0;
  pointer-events: none;
  trasition: opacity 500ms;
}

ローディング画面の切り替えとして、hideクラスを追加しています。
後ほど出てくるjsで処理を記述しています。
これがないとローディング画面がずっと表示されます。

.loading.circle {
  display: block;
  position: relative;
  top: cacl(50% - 20px);
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  boder-top: 7px solid #fffccc;
  boder-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal;
}

ローディング部分を実装しています。
position: relative;は本来の表示位置から要素を上下左右に動かしたい時に使用します。
今回はローディングを中央に配置したいので、top: cacl(50% - 20px);で、topから半分（中央）に配置して、-　20pxで要素の大きさ(width: 40px;,height: 40px;)から半分引きます。
このようにすることで、ローディングを中央に配置します。
boderでローディングの円の太さを示しています。
animationは、animation: loading(定義名) 700ms(変化時間) linear(進行具合) 0ms(何秒目から開始するか) infinite(ループ) normal(交互に反対方向させるかどうか)を示しています。

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframesで、アニメーションの開始から終了まで、どのようなアニメーションにするのかを指定できます。
loadingはアニメーションの任意の名前です。
0%でアニメーションの開始はローディングが回っていない状態をあらわしています。
100%でアニメーションが回転している状態をあらわしています。

※今回は、index.htmlの<body>タグ中に記述しています。
<script>
  const loading = document.querySelector('.loading');
  window.addEventListener('load', () => {
    loading.classList.add('hide');
  }, false);
</script>

const loading = document.querySelector('.loading');で、htmlのloadingクラスを指定します。

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

この部分で、ローディングの切り替え処理を記述しています。

対象の要素.addEventListener(種類, () => {
  // 処理を記述
});

loading.classList.add('hide');を加えることで、ローディングが完了した際にフェードアウトにする事が出来ます。これを設定しないと、無限にローディング画面が表示されます。

お疲れ様でした。

開発環境

実装画像

実装

解説

Discussion