必要な処理を整理

初めに必要そうな処理をまとめていきましょう。
今回のプログレス表示で必要そうな処理は大きく分けて以下の3点です。

では、次のセクションから実際にソースコードを書いていきます。

jQueryの読み込み

前のセクションではプログレス表示に必要な処理をまとめました。
このセクションでは、jQueryを読み込んでいきます。

すでに読み込んでいる方はjQueryの読み込みは飛ばしてください。

CDNを使ってjQueryを読み込みます。

以下のコードをhead内にコピペでOK！

HTML
コピー
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

あなたがこの記事を読んでいる頃には上のコードが古くなっているかもしれないのでjQuery CDNの取得先ものせておきますね。

jQuery CDN：https://code.jquery.com/

imagesLoadedの読み込み

jQueryは読み込めました？
そしたらimagesLoadedライブラリを読み込んでいきましょう。

これもCDNで。
以下のコードをjQueryよりも下にコピペでお願いします。

HTML
コピー
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

今のところhead内はこんな感じ

HTML
コピー
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

じゃあ次！HTMLとCSSいきます！

HTMLとCSS

imagesLoadedライブラリが読み込めたところでHTMLとCSSを書いていきましょう！

HTML
コピー
<div class="op_container">
  <div class="op_inner">
    <div class="op_text">0%</div>
    <div class="op_ber"></div>
  </div>
</div>

CSS
コピー
.op_container{
    background-color: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
}

.op_inner{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.op_text{
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.op_ber{
    background-color: #fff;
    margin-top: 5px;
    width: 0%;
    height: 1px;
}

次のjQueryを書くとこからちょっと難しいのでがんばってください！

JavaScript（jQuery）

ここからちょっと難しいのです。
でも、ソースコード内にメモ程度ですが解説をいれてるので参考にしてください。
ぱっぱらぱな人はとりあえずコピペで動くと思います。

動かなかったら以下の３点を確認してみてください。

• ・jQueryが読み込まれているか
• ・imagesLoadedが読み込まれているか
• ・body内にimgタグがあるか

ソースコードはこちら！

JavaScript
コピー
$(function(){

    // プログレス表示の関数を呼び出す
    imagesProgress();

    // 画像の読み込み状況をプログレス表示
    function imagesProgress(){
        // imagesLoadedライブラリでbody要素内の画像の読み込み状況を監視
        var imgLoad = imagesLoaded('body');
        // body要素内の画像の総数を変数へ格納
        var imgTotal = imgLoad.images.length;
        // 読み込みが完了した画像の枚数を格納する変数
        var imgLoaded = 0;
        // .op_berのwidthの値を格納する変数
        var current = 0;

        // 1秒に60回のペースで画像の読み込み状況をチェック
        progressTimer = setInterval(updateProgress, 1000 / 60);

        // imagesLoadedライブラリを利用し、画像が読み込まれるごとにimgLoadedを加算
        imgLoad.on('progress', function () {
            imgLoaded++;
        });

        // 画像の読み込み状況をもとに
        // .op_textのテキストの値と
        // .op_berのwidthの値を変更します
        // このupdateProgress関数は上に書いたsetInterval()により1秒に60回のペースで呼び出されます
        function updateProgress(){
            // 画像が何％読み込まれたか
            var target = (imgLoaded / imgTotal) * 100;
            // currentとtargetをもとにイージングをかける
            // 100に近づくにつれ遅くなる
            current += (target - current) * 0.1;

            // .op_textのテキストを反映
            // Math.floor()関数で小数点以下を切り捨て
            $('.op_text').text(Math.floor(current) + '%');
            // .op_berのwidthを反映
            $('.op_ber').css({width: current + '%'});

            // アニメーション終了処理
            if(current >= 100){
                // clearInterval()で上に書いたsetInterval()を解除する
                clearInterval(progressTimer);

                // ここに画像が読み込み終わった後の処理を書く
                setTimeout(function(){
                    $('.op_container').fadeOut();
                }, 1000);
                
            }

            // currentが99.9よりも大きければ100としてアニメーション終了処理へ
            if(current > 99.9){
                current = 100;
            }
        }
    }

});

とりあえず動きました？

こんな感じになってればOK!
デモサイト
画像を増やしたり減らしたり試してみるとよいかと思います。