2021-05-06

【JavaScript】ローディングの動作を実装する。簡易的に作ってます。

JavaScript,プログラミング

こんにちは、ダイキです。
今回は、JavaScript でローディングの動作を実装してみます。
検索したものを少し改良して、3秒間だけ維持するようにしています。

HTMLです。【JavaScript】ローディングの動作を実装する。簡易的に作ってます。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- ローディング画面 -->
  <div id="loading">
    <div class="spinner"></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】ローディングの動作を実装する。簡易的に作ってます。


#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

/* jsで追加 */
.loaded {
  opacity: 0;
  visibility: hidden;
}

JavaScriptです。【JavaScript】ローディングの動作を実装する。簡易的に作ってます。


window.onload = setTimeout(() => {
  const loading = document.getElementById('loading');
  loading.classList.add('loaded');
}, 3000);