code_note

png画像を→apngに変換する（https://ezgif.com/apng-maker）

[HTML]bodyのすぐ下に記述。

<body>
<div id="splash">
<div id="splash-logo"><img src="assets/img/loding-apng.png" alt="読み込み中" class="icon-01 apng-image"></div>
<!--/splash--></div>
<p>ローディング後、この画面が見えます。</p>
<!--/container--></div>
</body>

[CSS]

/* ローディング */
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  background:#fff;
  text-align:center;
  z-index: 9999999;
}
/* Loading画像中央配置　*/
#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash-logo img {
  width:100px;
}
/* ローディング ここまで　*/

[JQuery]

//ローディング画面用
//logoの表示
$(window).on('load',function(){
  $("#splash").delay(4000).fadeOut('slow');//ローディング画面を4.0秒（4000ms）待機してからフェードアウト
  $("#splash-logo").delay(3000).fadeOut('slow');//ロゴを3.0秒（3000ms）待機してからフェードアウト
});


//同じ日付で2回目以降ならローディング画面非表示の設定

var splash_text = $.cookie('accessdate'); //キーが入っていれば年月日を取得
var myD = new Date();//日付データを取得
var myYear = String(myD.getFullYear());//年
var myMonth = String(myD.getMonth() + 1);//月
var myDate = String(myD.getDate());//日
    
if (splash_text != myYear + myMonth + myDate) {//cookieデータとアクセスした日付を比較↓
        $("#splash").css("display", "block");//１回目はローディングを表示
        setTimeout(function () {
            $("#splash-logo").fadeIn(1000, function () {//1000ミリ秒（1秒）かけてロゴがフェードイン
                setTimeout(function () {
            $("#splash-logo").fadeOut(1000);//1000ミリ秒（1秒）かけてロゴがフェードアウト
                }, 1000);//1000ミリ秒（1秒）後に処理を実行
        setTimeout(function () {
            $("#splash").fadeOut(1000, function () {//1000ミリ秒（1秒）かけて画面がフェードアウト
            var myD = new Date();
            var myYear = String(myD.getFullYear());
            var myMonth = String(myD.getMonth() + 1);
            var myDate = String(myD.getDate());
            $.cookie('accessdate', myYear + myMonth + myDate); //accessdateキーで年月日を記録
        });
        }, 1700);//1700ミリ秒（1.7秒）後に処理を実行
    });
}, 1000);//1000ミリ秒（1秒）後に処理を実行
}else {
    $("#splash").css("display", "none");//同日2回目のアクセスでローディング画面非表示
}

ローディング画面（apng）