参考サイト
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>あわせて読みたい
プロおすすめの関連商品
コメントを残す