先展示一下效果：
动态效果：
1. 第一个是自己写的一个进度条，纯js写的，样式不太好看，相关的函数进行了js的封装，且适配性不太好，不推荐，只是作为个人的尝试。
2. 第二个是bootstrap的进度条：可以控制颜色，控制样式，比如有条纹，或者动画条纹，而且函数调用修改进度条值简单，直接通过jquery的css()与text()方法即可动态的修改进度条的值。较为推荐使用。
3. 第三个是layui的进度条：可以控制颜色，但只有这一种样式，样式比较单一，同时框架提供的函数调用不是很方便，所有函数调用都必须写在layui.use()方法的函数体中才能生效。
综合来说，第二种bootstrap进度条使用方便，且样式相对较多。推荐使用。(这里也发现一个小bug，当你改变进度条数值改变的过快时，其变化有时是不均匀的，最后一段到100%变化较快。)
下面上实现的源代码(注意要引入bootstrap与layui的css和js文件，以及第一种自定义进度条js实现类)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testDemo</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="progressBar.js"></script>
<link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
<script src="../../../assets/js/core/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../../../layui/css/layui.css">
<script src="../../../../layui/layui.js"></script>
<script>
//定义0-100的进度条值
var i=0;
$(function () {
//调用函数，传入父元素的jquery对象与进度条的颜色值，为rgb字符串
createProgressBar($("#mainDiv"),'#60f956');
setProgressBar(50);
layui.use('element',function () {
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
element.init();
});
//给按钮绑定事件
$('#startBtn').click(function () {
start();
});
//给按钮绑定事件
$('#resetBtn').click(function () {
reset();
});
});
//开始动态修改进度条值
function start() {
//定时函数调用设置进度条值的函数
var timer = setInterval(function(){
if(i>100){
clearInterval(timer);
return;
}
//控制第一个进度条的值
setProgressBar(i);
//控制第二个进度条值，bootstrap的进度条
$('.progress-bar').css("width",i+'%');
$('.progress-bar').text(i+'%');
layui.use('element',function () {
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
$('.layui-progress-bar').attr('lay-percent',i+'%');
element.init();
element.progress('demo', i+'%');
});
i++;
},100);
}
//重置进度条数值为0
function reset() {
i=0;
setProgressBar(i);
$('.progress-bar').css("width",i+'%');
$('.progress-bar').text(i+'%');
layui.use('element',function () {
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
$('.layui-progress-bar').attr('lay-percent',i+'%');
element.init();
element.progress('demo', i+'%');
});
}
</script>
</head>
<body>
<div class="row" style="min-height: 30px">
<div class="col-md-8">
</div>
<div class="col-md-4">
<!-- <button id="startBtn" class="layui-btn layui-btn-bg layui-btn-danger">开始</button>-->
<!-- <button id="resetBtn" class="layui-btn layui-btn-bg layui-btn-danger">重置</button>-->
</div>
</div>
<div class="row" style="height: 100px">
<div class="col-md-2">
</div>
<div class="col-md-2" style="font-weight: bolder;font-size: 18px">
自定义进度条：
</div>
<div class="col-md-4">
<div id="mainDiv" style="height: 40px">
</div>
</div>
</div>
<div class="row" style="height: 120px;">
<div class="col-md-2">
</div>
<div class="col-md-2" style="font-weight: bolder;font-size: 18px">
bootstrap框架进度条：
</div>
<div class="col-md-4">
<div class="progress">
<div class="progress-bar" style="width:40%">40%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:60%">60%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:70%">70%</div>
</div>
</div>
</div>
<div class="row" style="height: 120px;">
<div class="col-md-2">
</div>
<div class="col-md-2" style="font-weight: bolder;font-size: 18px">
layui框架进度条：
</div>
<div class="col-md-4">
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" >
<div class="layui-progress-bar layui-bg-blue" lay-percent="40%" ></div>
</div>
<br>
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" >
<div class="layui-progress-bar layui-bg-orange" lay-percent="60%" ></div>
</div>
<br>
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" >
<div class="layui-progress-bar layui-bg-red" lay-percent="70%" ></div>
</div>
</div>
</div>
<div class="row" style="height: 60px;">
<div class="col-md-6"></div>
<div class="col-md-4">
<button id="startBtn" class="layui-btn layui-btn-bg layui-btn-normal">开始</button>
<button id="resetBtn" class="layui-btn layui-btn-bg layui-btn-danger">重置</button>
</div>
</div>
</body>
</html>
下面是自定义进度条调用的js文件代码：
function createProgressBar(parent,color) {
var mainDivValue=$(" <div id='div'>\n" +
" <aside id='aside'></aside>\n" +
" <p id='p'><span id='span'>0</span>%</p>\n" +
" </div>").prop("outerHTML");
parent.append(mainDivValue);
//获取宽高
var width=parent.width();
var height=parent.height();
$('#div').css({
"width": width,
"height": height,
"position": "relative",
"border": "2px solid",
"margin": "0 auto",
"font-size":"12px"
});
$('#aside').css({
"height": height-4,
"width":"2px",
"background": color
});
$('#p').css({
"position": "absolute",
"top": 0,
"right": 0,
});
}
//传进来的value为0-100之间的值
function setProgressBar(value) {
var width=$("#div").width();
if(value>=100){
$("#aside").css("width",width+"px");
$("#span").text("100");
return;
}
//得到小数值
var floatValue=parseFloat(value)/100;
$("#aside").css("width",width*floatValue+"px");
$("#span").text(value);
}
第一种自定义的进度条参考了文章：
https://blog.csdn.net/weixin_44649228/article/details/87019376
bootstrap进度条参考：
https://www.runoob.com/bootstrap/bootstrap-progress-bars.html
