読み込み中にローダーを表示して、読み込み完了後に非表示する簡単な方法

JavaScript

読み込み中にローダーを表示して、読み込み完了後に非表示する簡単な方法を紹介します。

読み込み中にローダーを表示して、読み込み完了後に非表示する簡単な方法

読み込み中にローダーを表示して、読み込み完了後に非表示するには、JavaScriptのwindow.onload()を使うことで簡単に実装できます。

htmlのbody

  <body>
    <div id="loader"><h2>LOADING</h2></div>
    ...
    <!-- js -->
    ...
    <script src="./dist/js/project.min.js"></script>
  </body>

body内に、id属性でloaderという目印をつけています。
このidのloaderにloadedというクラスがついたら、読み込みが完了した処理を実行します。

htmlのhead

  <head>
    <!-- loader -->
    <link rel="stylesheet" href="./dist/css/loader.min.css" />
    <script>
      window.onload = () => {
        const loader = document.getElementById('loader');
        loader.classList.add('loaded');
      };
    </script>
    <link rel="stylesheet" href="./dist/css/main.min.css" />
    <title>Portfolio Two</title>
  </head>

idのloaderのcssを書いているファイルを読み込みます。
そして、scriptを記述します。ここはjsファイルに格納してもいいです。

scss

#loader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background-color: black;
  z-index: 10000;
  h2 {
    text-align: center;
    color: white;
    font-family: arial;
    font-size: 45px;
    line-height: 90px;
    letter-spacing: 15px;
    text-shadow: 0 1px 0 #efefef, 0 2px 0 #efefef, 0 3px 0 #efefef,
      0 4px 0 #efefef, 0 30px 5px rgba(0, 0, 0, 0.1);

    animation: float 3s linear infinite;
    animation-direction: alternate;
  }
  &.loaded {
    animation: fadeOut 1s forwards;
  }
}

@keyframes float {
  from {
    transform: rotate(5deg);
  }

  to {
    transform: rotate(-5deg);
  }
}
@keyframes fadeOut {
  from {
      opacity: 1;
  }
  
  to {
      display: none;
      opacity: 0;
      z-index: -1;
  }
}

loaderのcssは好きなものを使えばいいのですが、例としてあげています。
読込中は、loadingという文字がrotateで揺れます。
読み込み完了したら、#loaderにloadedというクラスがつきます。
そして、フェードアウトするアニメーションをつけています。
z-indexを高く設定している場合は、displayにnoneを設定していたとしても、忘れずに一番低くなるように設定します。

JavaScript

Posted by devsakaso