我需要帮助创建加载栏

Question

我正在尝试制作一个加载栏，就像在 Monkeytype 中“下载数据并应用设置”时一样。我只是想让条形图，橙色渐变从最左边移动到右边。

我尝试使用线性渐变，但似乎它只是在两种状态之间翻转（这也是随机的）。

body {
    background: black;
}

.line {
    position: absolute;
    width: 200px;
    height: 25px;
    margin: auto;
    background: linear-gradient(to right, orange, grey);
    border-radius: 25px;
    animation: gradual 2s ease-in-out infinite;
}

@keyframes gradual {
    0% {
        background: linear-gradient(to right, 0% orange, 100% grey);
    }

    100% {
        background: linear-gradient(to right, 100% orange, 0% grey);
    }
}

<div class='line'></div>

Answer 1

当您单击按钮时，它会触发 move() 函数，然后该函数从文档中获取 elem 元素。它生成变量、宽度和 ID。如果宽度低于 100，则会使宽度 +1。如果超过 100，则不会改变进度条。 CSS 样式化进度条，使其具有渐变效果并使其看起来不错。

您可以使用javascript实现动画加载栏

setTimeout

，调整超时时间来改变进度条增加的速度。这是使用线性渐变演示这种方法的片段。

function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
  border-radius: 20px;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  background: linear-gradient(to right, orange, black);
  border-radius: 20px;
}

<h1>progress bar click button</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">click the button</button>