【3分実装】jQueryローディングアニメーションの最短コード（コピペOK・カスタマイズ自由）

ローディングアニメーション、いわゆるサイトにアクセスしてページが表示される前の、あの「クルクル」ですね！

このアニメーションはですね、もちろん勝手に出てくるもんじゃありません。よく見るけれども、意図して加えられているんです。そこには、サイトユーザーへの配慮であったり、技術的な問題点から発生する遅延を埋めるためであったりするわけです。

そんなわけで、今回はローディングアニメーションの実装方法をご紹介！

プラグインは使わず、完全無料で、簡単に、実装していきましょう！

まぁ実際、少なからずこだわるべきポイントもあるんで、うまく使って他とは違った印象に残るホームページを作っちゃいましょう！

さっそくコードだ！！
- ローディングアニメーション画像のおすすめサイト
まとめ

さっそくコードだ！！

HTML

<div class="loading">
  <div class="animation">
    <img src="アニメーションで使うgif画像のパス" alt="">
  </div>
</div>

CSS

.loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 9999;

    .animation {
        position: absolute;
        margin: auto;
        width: 50px;
        height: 50px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

JQuery

(function($) {
	$(window).load(function() {
		$('.loading').delay(500).fadeOut();
	});
	// 15秒で強制的に.loadingをフェードアウトさせる
	function stop() {
		$('.loading').delay(1000).fadeOut();
	}
	setTimeout('stop()', 15000);
})(jQuery);

実装時のポイント