新建html。

书写html

<div class="htmleaf-content">

<h3 class="center">基本进度条</h3>

<div id="progressbar1"></div>

<h3 class="center">控制进度条的颜色</h3>

<div id="progressbar2"></div>

<h3 class="center">控制进度条的高度</h3>

<div id="progressbar3"></div>

<h3 class="center">控制进度条的圆角</h3>

<div id="progressbar4"></div>

</div>

书写css样式

<style>

body, html { font-size: 100%; padding: 0; margin: 0; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

body { background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }

a { color: rgba(255, 255, 255, 0.6); outline: none; text-decoration: none; -webkit-transition: 0.2s; transition: 0.2s; }

a:hover, a:focus { color: #74777b; text-decoration: none; }

.htmleaf-container { margin: 0 auto; }

.htmleaf-content { width: 600px; margin: 50px auto; }

.center { text-align: center; }

.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); }

.proggress { height: 8px; width: 10px; background-color: #3498db; }

.percentCount { float: right; margin-top: 10px; clear: both; font-weight: bold; font-family: Arial }

</style>

书写jquery.lineProgressbar.js。

(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);

整体代码样式结构。

查看效果。

打开网页正在加载的时候。

查看效果。

打开网页加载完毕的时候。