将一些jquery替换为javascript -进度条加载

进度条加载是一种常见的前端交互效果，用于展示任务或操作的完成进度。在传统的前端开发中，常使用jQuery插件来实现进度条加载效果。然而，随着现代前端开发的发展，原生JavaScript已经提供了许多新的特性和API，可以完全替代jQuery来实现进度条加载。

使用原生JavaScript实现进度条加载的步骤如下：

创建HTML结构：在HTML文件中，创建一个容器元素，用于显示进度条。可以使用<div>元素，并为其设置一个唯一的ID，例如<div id="progress-bar"></div>。
编写CSS样式：使用CSS样式来定义进度条的外观。可以设置进度条的宽度、高度、颜色等样式属性。例如：

#progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

#progress-bar .progress {
  height: 100%;
  background-color: #00aaff;
}

编写JavaScript代码：使用原生JavaScript来实现进度条的加载效果。可以通过获取容器元素的引用，然后根据任务或操作的完成情况，动态修改进度条的宽度。例如：

// 获取进度条容器元素
var progressBar = document.getElementById('progress-bar');

// 设置初始进度为0%
var progress = 0;

// 定义加载函数
function loadProgress() {
  // 增加进度
  progress += 10;

  // 更新进度条宽度
  progressBar.style.width = progress + '%';

  // 判断是否加载完成
  if (progress >= 100) {
    // 加载完成后的操作
    console.log('加载完成');
  } else {
    // 未加载完成，继续加载
    setTimeout(loadProgress, 1000);
  }
}

// 调用加载函数
loadProgress();

在上述代码中，通过document.getElementById('progress-bar')获取进度条容器元素的引用，然后使用progressBar.style.width来动态修改进度条的宽度。通过递增progress变量的值，可以模拟加载的进度。当进度达到100%时，表示加载完成。

这种使用原生JavaScript实现进度条加载的方法具有以下优势：