网页动画加载进度条答案

【问题标题】：progress bar for loading animation of webpage网页动画加载进度条
【发布时间】：2021-04-24 19:05:36
【问题描述】：

我想为我的网页制作一个加载动画，使用 JavaScript 或 Ajax 加载需要 8-10 秒（我不知道）

加载动画是一个进度条我想每 1 秒停止一次以增加 10% 例如（https://codepen.io/gustitammam/pen/RRXGdj）

Bootstrap 不受欢迎，我不想在上面显示文字和百分比

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="D:\PORTFOLIO\master.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="myprogress">
      <div id="mybar">
        <span id="incvalue">1%</span>
      </div>
    </div>
   <br> <button onclick="move()">ClickMe</button>
   <script>
   const move = () => {
  var elem = document.getElementById("mybar");
  var width = 1;
  var id = setInterval(frame, 10)

  function frame(){
    if(width >= 100){
      clearInterval(id);
    }else{
      width++;
      elem.style.width = width + "%";
      document.getElementById("incvalue").innerHTML = width + "%";
    }
  }
}
   </script>
  </body>
</html>

CSS

html{
  scroll-behavior: smooth;
}

body{
  background: #181818;
  color: #f4eee8;
}

#myprogress{
   width: 45%;
   background: #181818;
   margin: auto;
 }

 #mybar{
   width: 1%;
   background: white;
   color: white;
   text-align: center;
 }

【问题讨论】：

标签： javascript html jquery css ajax

【解决方案1】：

在您引用的示例中，您只需注释掉设置以下字段的 JS 行： .attr 和 .text

然而，关于您希望省略 Bootstrap，您并不是在问一个简单的技术问题，而是建议有人为您编写一个完整的程序片段，这通常不是 Stack Overflow 的预期目的。

【讨论】：

谢谢你的时间我不希望整个代码告诉我如何让它永远停止 10%

【解决方案2】：

其实我没做但是我不知道他的 Stack ID 所以@0_0#1045（来自 Discord）

HTML

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="D:\PORTFOLIO\master.css">
      </head>
      <body>
        <h3>Dynamic Progress Bar</h3>
        <p>Running progress bar from 0% to 100% in 10 seconds</p>
        <div class="progress">
            <div class="current-progress">
    
            </div>
          </div>
        </div>
        <script src="master.js"></script>
      </body>
    </html>

CSS

html{
  scroll-behavior: smooth;
}

body{
  background: #181818;
  color: #f4eee8;
  height: 100vh;
  width: 100vw;
}

.progress {
  position: relative;
  margin-top: 20px;
  height: 20px;
  width: 700px;
  background-color: #181818;
}

.current-progress {
  height: 100%;
  width: 0%;
  background-color: white;
  text-align: center;
  transition: all 0.3s;
}

let progressValue = 0;
const progressBar = document.querySelector(".current-progress");

progressBar.style.width = `${progressValue}%`;

const timer = setInterval(() => {
  if (progressValue < 100) {
    progressValue += 10;
    progressBar.style.width = `${progressValue}%`;
  
  }
  if (progressValue === 100) {
    clearInterval(timer);
  }
}, 1000);

终于解决了！！！

【讨论】：