Loading-基本的実装方法

  
  HTML
  <div class="loading2" id="loading">              画面全体を覆うオーバーレイ画面用    
    <div class="spinner"></div>              ローディングアニメーション用のスピナー
    <p class="loading-text">読み込み中</p>   ローディング中のテキスト   
  </div>

  jQuery
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
  

  
  CSS
  画面全体を覆うオーバーレイ画面用 
  .loading2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  ローディングアニメーション用のスピナー
  .spinner {
      width: 100px;
      height: 100px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid tomato;
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }
  アニメーション用のスピナー
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loading-text {
      margin-top: 15px;
      font-family: Arial, sans-serif;
      color: #333;
  }
  非表示のコンテンツ
  .content {
      display: none;
  }
  .show {
      display: block;
  }
  

  
  JavaScript
  $(window).on('load', function() {                 読み込みの完了を待つ
      $("#loading").delay(2000).fadeOut('slow');    ローディング画面を2秒後に非表示にする Show=CSSで記載で初期非表示設定
      $(".content").addClass("show");               コンテンツを表示する場合（オプション）Show=CSSで記載で初期非表示設定
  });
  

Loading-Animation集

See the Pen Loading by 世紀末救世主 (@kingof4711) on CodePen.

See the Pen LoadingBar by 世紀末救世主 (@kingof4711) on CodePen.