html

<div class="js-loading o-loading">
  <p class="js-loadingCountUp">
    <span class="js-loadingPercentNumber"></span>%
  </p>
  <div class="js-loadingMeter c-loading-meter"></div>
</div>

JavaScript

const images = document.querySelectorAll("img"); // ページ内の画像を全て取得
const loadingArea = document.querySelector(".js-loading"); // ローディング画面全体
const percentNumber = document.querySelector(".js-loadingPercentNumber"); // loadingと連動するパーセント部分
const loadingGauge = document.querySelector(".js-loadingMeter"); // loadingと連動するメーター部分
let imgCounting = 0;
let baseCounting = 0;
const gaugeWidth = 100; // ゲージの全体幅
let current;

// 画像の読み込み
for (let i = 0; i < images.length; i++) {
  const img = new Image(); // 新たなimg要素を作成
  // 画像読み込み完了したとき
  img.addEventListener("load", function () {
    imgCounting += 1;
  });
  // 画像読み込み失敗したとき
  img.addEventListener("error", function () {
    imgCounting += 1;
  });
  img.src = images[i].src; // ソースのパスを設定
}

// 一定時間ごとにローディング演出を繰り返す
const nowLoading = setInterval(function () {
  if (baseCounting <= imgCounting) {
    // ローディング状況をパーセンテージで算出
    current = Math.floor((baseCounting / images.length) * 100);
    // 算出したパーセンテージをHTMLに出力
    percentNumber.innerHTML = current;
    // 増加したパーセンテージをローディングゲージのwidthに更新
    loadingGauge.style.width = Math.floor((gaugeWidth / 100) * current) + "%";
    baseCounting += 1;

    // ローディングが完了した場合

    // ローディングが完了した場合
    if (baseCounting === images.length) {
      // ローディング画面全体を非表示
      loadingArea.classList.add("is-loaded");
      // ローディング画面のフェードアウト演出が完了したらDOMツリーから取り除く
      loadingArea.addEventListener("transitionend", function () {
        clearInterval(nowLoading);
        loadingArea.remove();
      });
    }
  }
}, 50);

scss

.o-loading {
  opacity: 1;
  .c-loading-meter {
    width: 0;
    height: 3px; // 希望のローディングメーター高さ
    background-color: #333; // 希望のローディングメーター背景色
  }
  &.is-loaded {
    opacity: 0;
    transition: 1s 1s;
  }
}