用jQuery+html+css实现带彩色进度条样

新建html。I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

书写htmlI7D办公区 - 实用经验教程分享！

div class="htmleaf-content">I7D办公区 - 实用经验教程分享！

h3 class="center">基本进度条/h3>I7D办公区 - 实用经验教程分享！

div id="progressbar1">/div>I7D办公区 - 实用经验教程分享！

h3 class="center">控制进度条的颜色/h3>I7D办公区 - 实用经验教程分享！

div id="progressbar2">/div>I7D办公区 - 实用经验教程分享！

h3 class="center">控制进度条的高度/h3>I7D办公区 - 实用经验教程分享！

div id="progressbar3">/div>I7D办公区 - 实用经验教程分享！

h3 class="center">控制进度条的圆角/h3>I7D办公区 - 实用经验教程分享！

div id="progressbar4">/div>I7D办公区 - 实用经验教程分享！

/div>I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

书写css样式I7D办公区 - 实用经验教程分享！

style>I7D办公区 - 实用经验教程分享！

body, html { font-size: 100%; padding: 0; margin: 0; }I7D办公区 - 实用经验教程分享！

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }I7D办公区 - 实用经验教程分享！

.clearfix:before, .clearfix:after { content: " "; display: table; }I7D办公区 - 实用经验教程分享！

.clearfix:after { clear: both; }I7D办公区 - 实用经验教程分享！

body { background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }I7D办公区 - 实用经验教程分享！

a { color: rgba(255, 255, 255, 0.6); outline: none; text-decoration: none; -webkit-transition: 0.2s; transition: 0.2s; }I7D办公区 - 实用经验教程分享！

a:hover, a:focus { color: #74777b; text-decoration: none; }I7D办公区 - 实用经验教程分享！

.htmleaf-container { margin: 0 auto; }I7D办公区 - 实用经验教程分享！

.htmleaf-content { width: 600px; margin: 50px auto; }I7D办公区 - 实用经验教程分享！

.center { text-align: center; }I7D办公区 - 实用经验教程分享！

.progressbar { width: 100%; margin-top: 5px; margin-bottom: 35px; position: relative; background-color: #EEEEEE; box-shadow: inset 0px 1px 1px rgba(0,0,0,.1); }I7D办公区 - 实用经验教程分享！

.proggress { height: 8px; width: 10px; background-color: #3498db; }I7D办公区 - 实用经验教程分享！

.percentCount { float: right; margin-top: 10px; clear: both; font-weight: bold; font-family: Arial }I7D办公区 - 实用经验教程分享！

/style>I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

书写jquery.lineProgressbar.js。I7D办公区 - 实用经验教程分享！

(function($){'use strict';$.fn.LineProgressbar=function(options){var options=$.extend({percentage:null,ShowProgressCount:true,duration:1000,fillBackgroundColor:'#3498db',backgroundColor:'#EEEEEE',radius:'0px',height:'10px',width:'100%'},options);return this.each(function(index,el){$(el).html('div class="progressbar">div class="proggress">/div>div class="percentCount">/div>/div>');var progressFill=$(el).find('.proggress');var progressBar=$(el).find('.progressbar');progressFill.css({backgroundColor:options.fillBackgroundColor,height:options.height,borderRadius:options.radius});progressBar.css({width:options.width,backgroundColor:options.backgroundColor,borderRadius:options.radius});progressFill.animate({width:options.percentage "%"},{step:function(x){if(options.ShowProgressCount){$(el).find(".percentCount").text(Math.round(x) "%")}},duration:options.duration})})}})(jQuery);I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

整体代码样式结构。I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

查看效果。I7D办公区 - 实用经验教程分享！

打开网页正在加载的时候。I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！

查看效果。I7D办公区 - 实用经验教程分享！

打开网页加载完毕的时候。I7D办公区 - 实用经验教程分享！

I7D办公区 - 实用经验教程分享！