需要下载jquery的js文件，并需要把文件添加到项目中，方便后面在页面引入使用。文件添加的位置，可以自己定义。这里我们使用的是jquery.min.3.4.1版本。

新建页面，并将jquery引入页面。

script src=/bundles/jquery?201905280934/script

在新建的页面中，添加进度条生成的依赖容器。

div class=statistic_wrap

div class=statistic_content/div

/div

编写进度条展示的模块及样式。模块可按照自己的具体展示来实现，样式如下：

.statistic_wrap{padding: 0 0.2rem 1.07rem;}

.statistic_content {width: 100%;}

.widthBox {width:100%;background: rgba(255,255,255,0.7);margin-top: 0.4rem;border-radius: 4px;padding: 0.35rem;}

.widthBox .title{color:#ffffff; text-align: left;font-size: 0.375rem; }

.singleLine {border-bottom: 1px solid #f1f1f2;overflow: hidden;}

.singleLine .sub-title{ text-align: left; color: #92b1d8;padding-bottom: 0;}

.singleLine .lineData { margin-bottom: 0.37rem;position:relative; display:block; width:70%; background:#efefef; height:6px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -webkit-transition:0.4s linear; -moz-transition:0.4s linear; -ms-transition:0.4s linear; -o-transition:0.4s linear; transition:0.4s linear; -webkit-transition-property:width, background-color; -moz-transition-property:width, background-color; -ms-transition-property:width, background-color; -o-transition-property:width, background-color; transition-property:width, background-color; float: left; }

.singleLine .title { width:100%; font-size:0.4rem;padding: 0.32rem 0;padding: 0.37rem 0; line-height: 1;}

.widthBox .singleLine:last-child{border: none;}

为了实现进度条的动态加载，我们需要使用jquery的animate方法来实现动态。

$(.lineData).each(function ()

{

$(this).find(.bar).animate({

width: $(this).attr(data)

}, 1000);

});

保存页面及样式，运行页面，即可得到如下效果，图1为初始加载的效果，图2为动态加载完成后的效果。