Loading

このページの最初の読み込みの表示設定

  
  HTML
  <div id="loading">
    <div class="kvArea" id="loading_logo">
      <div class="img_box"><img src="../img/logo/scroll7.jpg" alt="img" class="fadeUp"></div>
    </div>
    <div id="loading_text"></div>
  </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>
  自分コード記載
  <script src="../js/Loading.js"></script>
  </body>
  </html>

  CSS
  #loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  text-align: center;
  }
  #loading_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #loading .kvArea {
    width: 100%;
  }
  #loading .kvArea .img_box {
    text-align: center;
  }
  #loading .kvArea .img_box img {
    max-width: 100%;
    height: auto;
  }
  .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.2s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    opacity: 1;
  }
  @keyframes fadeUpAnime {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  javascript
  $(window).on('load',function(){
  $("#loading").delay(1200).fadeOut('slow');//ローディング画面を1.2秒（1200ms）待機してからフェードアウト
  });

  テキストのカウントアップの設定
  var bar = new ProgressBar.Line(loading_text, {//id名を指定
      strokeWidth: 0,//進捗ゲージの太さ
      duration: 1000,//時間指定(1000=1秒)
      trailWidth: 0,//線の太さ
      text: {//テキストの形状を直接指定   
          style: {
              position:'absolute',
              left:'50%',
              top:'80%',
              margin:'0',
              transform:'translate(-50%,-50%)',
              'font-family':'sans-serif',
              'font-size':'1.5rem',
              color:'#333',
          },
          autoStyleContainer: false //自動付与のスタイルを切る
      },
      step: function(state, bar) {
          bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
      }
  });
  アニメーションスタート
  bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画
      $("#loading_text").delay(0).fadeOut('fast');//アニメーションが終わったら#loading_textをフェードアウト
  });