Loading-1

  
  HTML
  <div id="loading1">
    <div id="loading_box">
      <div class="loading-one animation_loading">
        <p class="loading-txt">Loading-Loading</p>
      </div>
    </div>
  </div>

  CSS
  #loading1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: tomato;
  }
  #loading_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }
  .loading-one {
    display: inline-block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
  }
  .loading-one p.loading-txt {
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.25em;
    line-height: 2.0;
    padding: 2em 0;
  }

  .animation_loading {
    animation: equalizer_loading 7000ms infinite;
    animation-iteration-count: 10;
  }
  @keyframes equalizer_loading {
    0% {
      width: 70%;
    }
    10% {
      width: 50%;
    }
    20% {
      width: 100%;
    }
    30% {
      width: 10%;
    }
    40% {
      width: 50%;
    }
    50% {
      width: 70%;
    }
    60% {
      width: 50%;
    }
    70% {
      width: 10%;
    }
    80% {
      width: 100%;
    }
    90% {
      width: 10%;
    }
    100% {
      width: 70%;
    }
  }

  html, body {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: .025em;
    line-height: 1.8;
  }
  * {
    box-sizing: border-box;
  }
  h2 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
  }
  .txt {
    font-size: 16px;
    text-align: center;
  }
  .section {
    padding: 20px 10px;
  }
  ._a {
    max-width: 300px;
    margin: 30px auto 0;  
  }
  ._a a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2.0em 1.0em;
    border: 1px solid #222222;
    background: linear-gradient(to right, #ffffff 50%, #222222 50%);
    background-size: 200% auto;
    color: #222222;
    font-size: 34px;
    text-decoration: none;
    text-align: center;
    transition: .3s;
    position: relative;
  }
  ._a a:after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 100%;
    height: 100%;
    border-right: 1px solid #222222;
    border-bottom: 1px solid #222222;
  }
  ._a a:hover {
    color: #ffffff;
    background-position: -100% 0;
  }

  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>

  javascript
  $(window).on('load',function(){
    $("#loading1").delay(5000).fadeOut('slow');//ローディング画面を5秒（5000ms）待機してからフェードアウト
    $("#loading_box").delay(5500).fadeOut('slow');//ローディングテキストを5.5秒（5500ms）待機してからフェードアウト
  });