HTML页面loading加载效果, 展示效果参考本站

<style>
   .loading {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    transition: opacity 1s ease;
  }

  .loading.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  .load_txt {
    text-align: center;
  }

  .load_txt .img img {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    animation: fadeIn 1.2s ease-in-out;
  }

  .load_txt .txt {
    font-size: 18px;
    color: #444;
    margin-bottom: 15px;
    letter-spacing: 1px;
    animation: fadeIn 2s ease-in-out;
  }

  .load_txt .progress_loading {
    font-size: 48px;
    font-weight: bold;
    color: #c7000b;
    animation: fadeIn 2s ease-in-out;
  }

  .load_txt .progress_loading span {
    display: inline-block;
    min-width: 60px;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

   
</style>


<!-- Loading 层 -->
<div class="loading" id="loading">
  <div class="load_txt">
    <div class="img"><img src="https://www.zuoan.com.cn/static/upload/image/sc/logo.png" alt="LOGO"></div>
    <div class="txt">外贸网站建设，让业务全球可达</div>
    <div class="progress_loading"><span id="percent">0</span>%</div>
  </div>
</div>
 

<script>
  let percent = 0;
  const percentEl = document.getElementById('percent');
  const loadingEl = document.getElementById('loading');
  const mainEl = document.getElementById('main');

  // 模拟加载动画
  const timer = setInterval(() => {
    // 控制加载速度（越小越快）
    percent += Math.floor(Math.random() * 4) + 1;
    if (percent > 100) percent = 100;
    percentEl.textContent = percent;

    // 到100%时停止并淡出
    if (percent >= 100) {
      clearInterval(timer);
      setTimeout(() => {
        loadingEl.classList.add('fade-out');
        setTimeout(() => {
          loadingEl.style.display = 'none';
          mainEl.classList.add('visible');
          document.body.style.overflow = 'auto';
        }, 1000);
      }, 400);
    }
  }, 20);
</script>