样式：
<style type="text/css"> ?????.processcontainer2{ ????????width:450px; ????????border:1px solid #6C9C2C; ????????height:25px; ????????border-radius: 10px; ??????box-shadow: 5px 10px 20px lightgray; ????} ????#processbar2{ ????????background:green; ????????float:left; ???????height:100%; ????????text-align:center; ????????line-height:150%; ???????border-radius: 10px; ??????color: white; ????} ?</style>关键HTML代码：
<body> ???????<div class="processcontainer2"> ???????????<div id="processbar2">0</div> ???????</div></body>
脚本：
???<script type="text/javascript" src="js/jquery-1.11.3.js" ></script> ???<script type="text/javascript"> ???????function gogogo(){ ???????????var bar=$("#processbar2"); ???????????$(bar).html(parseInt($(bar).html())+1+"%") ???????????$(bar).css("width",$(bar).html()) ???????????console.log($(bar).html()) ???????????//进度条满 ???????????if($(bar).html()=="100%"){ ???????????????window.clearInterval(start); ???????????} ???????} ???????var start=setInterval(function(){gogogo()},50); ???????$(document).ready(function(){ ???????????start; ???????}) ???</script>效果：
HTML5+CSS+JQuery 实现简单的进度条功能
原文地址：https://www.cnblogs.com/EdinburghOne/p/9392346.html