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

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

参考サイト

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>

プロおすすめの関連商品

コメントを残す

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

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。