【コピペ】cssで簡単にローディングアニメーションを実装する方法

参考サイト

https://projects.lukehaas.me/css-loaders/

こちらのサイトのコードを拝借して、コピペで簡単にローディングアニメーションを作成することができます。

実装の流れ

htmlに書く内容

こちらをhtmlを、アニメーションを表示させたい場所に記入します。

<div class="loader">Loading...</div>

フルスクリーンにしたいなら以下のコードにしてください。

場所はbody開始直下でいいです。

<div id="loading">
    <div class="loader">Loading...</div>
</div>

cssに書く内容

先ほどのサイトの、好きなアニメーションの<View Source>をクリックするとcssが表示されますので、コピペします。

フルスクリーンにしたい場合は、追加でこちらを記載します。

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;  /*好きな背景色*/
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 9999;
}

ロードが完了したらアニメーションを閉じるスクリプト

フルスクリーンにする場合など、必要であればこちらをhtmlのbody閉じタグの直前に記載します。

<script>
  // ページロードが完了したらアニメーションを閉じる
    window.onload = function() {
      const spinner = document.getElementById('loading');
      spinner.classList.add('loaded');
    }
</script>

プロおすすめの関連商品

おすすめ記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です