Bootstrap.css と バニラJSで お手軽ローディングスピナー実装

<!-- Bootstrap CSSの読み込み -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<!-- 〜略〜 -->

<!-- スピナー本体＋CSS -->
<style>
  #loading {
        background: rgba(0, 0, 0, .75);
        z-index: 10000;
    }
</style>

<div id="loading" class="position-absolute top-0 start-0 w-100 h-100 d-none">
  <div class="text-center position-absolute top-50 start-50 w-100 translate-middle">
      <div class="spinner-border text-light" style="width: 10vw; height: 10vw;" role="status">
          <span class="sr-only"></span>
      </div>
  </div>
</div>

<!-- JS -->
<script>
  // ロード開始時にローディングを表示
  show_loading();

  // 全てのリソースが読み込まれた後でローディングを非表示にする
  window.addEventListener('load', function() {
      console.log('All resources finished loading!');
      hide_loading();
  });

  // ローディング表示
  function show_loading() {
      console.log('Showing loading spinner');
      document.getElementById('loading').classList.remove('d-none');
      document.documentElement.style.overflow = 'hidden';
  }

  // ローディング非表示
  function hide_loading() {
      console.log('Hiding loading spinner');
      document.getElementById('loading').classList.add('d-none');
      document.documentElement.style.overflow = '';
  }
</script>

アコーディオンとかはBootstrapのJSで動くのになぜスピナーは自分でJSを書かないかんのか謎ですが、とにかくこれで動きます。