页面展示：
点击加载进度条：
点击结束进度条：
代码：
<html> <meta charset="utf-8"> <title>jQuery制作进度条</title> <link rel="stylesheet" href="label/bootstrap.css" type="text/css"/> <script src="label/jquery.min.js" type="text/javascript"></script> <script src="label/bootstrap.min.js" type="text/javascript"></script> <style> #loading6 { height: 34px; width: 100%; background-image: url(label/loading.gif); background-repeat: no-repeat; background-position: center; } </style> <script type="text/javascript"> $(function() { $('#add_disk_model').modal('show') $('#loading6').hide() $('#exec_label').click(function () { $('#loading6').show() }); $('#stop_label').click(function () { $('#loading6').hide() }); }); </script> <form> <div id="add_disk_model" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title">测试加载条</h4> </div> <div class="panel-body"> <form class="bs-example form-horizontal activate-form"> <div id="loading6" class="portlet-body"></div> <div class="form-actions "> <div class="modal-footer"> <div class="col-md-4"> <button id="exec_label" type="button" class="btn green">加载进度条</button> </div> <div class="col-md-4"> <button id="stop_label" type="button" class="btn green">结束进度条</button> </div> </div> </div> </form> </div> </div> </div> </div> </form> </html>
插件参考：
链接：https://pan.baidu.com/s/1k86UfxWTHa3HSJnct42uKQ
提取码：p32l