js创建动态加载进度条的方法

这篇文章主要介绍了js创建动态加载进度条的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

进度条可以用来描述正在执行的任何任务的进度，它通常会被用于显示下载和上传时的状态。换句话说，进度条可以用来描述正在进行的任何事情的状态。

下面我们就来看看使用JavaScript如何实现动态加载的进度条？我们需要执行以下步骤：

1、为进度条创建HTML结构：

下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。

<div id="Progress_Status"> 
  <div id="myprogressBar"></div> 
</div>

2、添加CSS：

下面的代码用于设置进度条的宽度和背景颜色以及条形图中的进度状态。

#Progress_Status { 
  width: 50%; 
  background-color: #ddd; 
} 
  
#myprogressBar { 
  width: 1%; 
  height: 35px; 
  background-color: #4CAF50; 
  text-align: center; 
  line-height: 32px; 
  color: black; 
}

3、添加JavaScript：

下面的代码使用javascript函数“update”和“scene”创建一个动态progess bar（动画）。

function update() { 
  var element = document.getElementById("myprogressBar");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
      width++;  
      element.style.width = width + '%';  
    } 
  } 
}

运行：

这样的加载样式有点单调，我们还可以添加数字标签以指示用户在流程中的位置；这需要在进度条内部或外部添加新元素，显示进度状态。

4、添加数字加载样式

我们可以在JavaScript的else {}语句里在添加一条语句：

element.innerHTML = width * 1  + '%';

就可以实现数字加载显示进度状态的样式，运行效果：

感谢你能够认真阅读完这篇文章，希望小编分享js创建动态加载进度条的方法内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!