【CSS】WEBページを開いた時の「ローディング・アニメーション」を作る方法｜HTML・CSS・jQuery

ローディング・アニメーションを表示したい

サイトを開いた時や画面を遷移した時に、ページが表示される時にただ待ってもらっているだけでは…という感じがしたので、画面の前に「ローディングアニメーション」を表示させたい…と思い、実際に試してみたいと思います。

いろいろな方が作られている凄いアニメーションを参考にさせていただきました！ありがとうございます。

https://connoratherton.com/loaders

https://tobiasahlin.com/spinkit/Simple CSS Spinners

まずはhtml部分を作る

まずは、土台になるHTML部分を作っていきます。料理で例えると、お皿を準備して料理を乗せているようなイメージです（表現が適切か分かりませんのでご了承ください…！）。

[外側]
　＞[内側]
　　＞[画像部分]
　　＞[Now Loading…]

<div id="loader-flame">
 <div id="loader-icon">
   <img src="XXXXXXXX/XXXXXXX/XXXXXXX/XXXXXXXX.gif" width="120" height="120" alt="Now Loading..." />
   <p>Now Loading...</p>
 </div>
</div>

という３段構成になっています。

CSS部分を作る

次に、外側のフレーム部分を作っています。料理で例えると、お皿に乗せた料理をお皿の上で整えているイメージです（表現が適切か分かりませんのでご了承ください…！）。

要素を画面左上端から右下端まで、画面いっぱいに広げて、塗りつぶしています。z-index: 1にして、画面の手前のレイヤーに配置しています。

#loader-flame {
 display: none;
 position: fixed;
 width: 100vw;
 height: 100vh;
 top: 0px;
 left: 0px;
 background-color: #007aff;
 z-index: 1;
}

#loader-icon {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
 color: #fff;
 z-index: 2;
}

次に、jQuery部分を作っていきます。

続きはこちら

https://eguweb.jp/css/how-loading-opening-animation