vue2/vue3-百分比屏幕预加载动画，缓冲进度条从0%到100%，减少白屏尴尬，提高用户体验

本文链接：https://blog.csdn.net/qq_35221977/article/details/137112745

本文介绍了一种使用HTML、CSS和JavaScript实现的百分比屏幕预加载动画，通过模拟缓冲进度条从0%到100%，减少网页加载时的白屏时间，从而改善用户体验。

摘要由CSDN通过智能技术生成

百分比屏幕预加载动画，缓冲进度条从0%到100%，减少白屏尴尬，提高用户体验

看效果

上完整代码

HTML 结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen Preloader</title>
</head>

<body>
  <div class="aqua">
    <div class="percent-bar">
      <h3 class="number">10%</h3>
    </div>
  </div>

  <h2>Hello，dear!</h2>
</body>

</html>

CSS 样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #03a9f4;
}

body {
  min-height: 100vh;
  background-color: #eee;
  
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: consolas;

  transition: background-color 0.5s;
  transition-delay: 0.2s;
}

.aqua {
  position: relative;
  
  width: 70vw;
  max-width: 500px;
  padding: 10px;
  border-radius: 50px;
  box-shadow: inset 0px 10px 5px rgba(0, 0, 0, 0.07), 
              0px 15px 8px rgba(0, 0, 0, 0.05),
              0px 10px 15px rgba(0, 0, 0, 0.05),
              inset 0px -10px 15px rgba(255, 255, 255, 0.9);
  
  transition: opacity 0.5s, visibility 0.5s;
}

.aqua::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%); 
  width: 95%;
  height: 5px;
  background-color: #fff4;
  border-radius: 20px;
}

.percent-bar {
  position: relative;

  /* width: 0; */
  width: 10%;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 20px;
}

.number {
  position: absolute;
  top: -66px;
  right: -55px;

  padding: 10px 15px;
  color: var(--primary-color);
  box-shadow: inset 0px 10px 5px rgba(0, 0, 0, 0.07),
              0px 15px 8px rgba(0, 0, 0, 0.05),
              0px 10px 15px rgba(0, 0, 0, 0.05),
              inset 0px -10px 15px rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  border-bottom-left-radius: 0px;
}

h2 {
  position: absolute;

  font-size: 4em;
  font-weight: 500;
  color: #fff;

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.5s, visibility 0.5s;
  transition-delay: 0.5s;
}


@media screen and (max-width: 576px) {
  h2 { font-size: 3em; }
}

JavaScript 代码

/**进度 */
let i = 0;

const body = document.querySelector('body'),
      aquaEle = document.querySelector('.aqua'),
      percentBarEle = document.querySelector('.percent-bar'),
      numberEle = document.querySelector('.number'),
      welcEle = document.querySelector('h2');
      
let interval = setInterval(() => {
  const text = `${i}%`;

  numberEle.textContent = text;
  percentBarEle.style.width = text;

  i+=2;

  if (i > 100) {
    clearInterval(interval);

    /**隐藏加载 */
    aquaEle.style.opacity = '0';
    aquaEle.style.visibility = 'hidden';

    /**改变背色 */
    body.style.backgroundColor = `var(--primary-color)`;
    
    /**显示文字 */
    welcEle.style.opacity = '1';
    welcEle.style.visibility = 'visible';
  }
}, 50);