在页面中，单击加载按钮，页面的进度条慢慢增加，直到显示100%为止

要实现这个功能，需要使用 JavaScript 编写代码。具体实现步骤如下：

1. 给加载按钮添加点击事件监听器。

2. 在事件处理函数中，获取页面中的进度条元素，并设置其初始宽度为 0。

3. 使用 setInterval() 方法每隔一定时间（比如 50 毫秒）增加进度条的宽度，直到达到 100% 为止。

4. 在达到 100% 后，清除 setInterval() 定时器，隐藏进度条元素。

具体实现代码如下：

HTML 代码：

<button id="loadBtn">加载</button>
<div id="progressBar"></div>

CSS 代码：

#progressBar {
  width: 0;
  height: 5px;
  background-color: blue;
}

JavaScript 代码：

const loadBtn = document.getElementById("loadBtn");
const progressBar = document.getElementById("progressBar");

loadBtn.addEventListener("click", function() {
  let width = 0;
  progressBar.style.width = width + "%";
  progressBar.style.display = "block";

  const intervalId = setInterval(function() {
    if (width >= 100) {
      clearInterval(intervalId);
      progressBar.style.display = "none";
    } else {
      width += 1;
      progressBar.style.width = width + "%";
    }
  }, 50);
});

当你单击加载按钮时，进度条会慢慢增加，直到达到 100%，然后自动隐藏。