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

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

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。成都创新互联公司坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站设计、成都网站建设、微信公众号开发、电商网站开发，微信小程序定制开发，软件按需网站设计等一站式互联网企业服务。

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

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

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

下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“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创建动态加载进度条的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!