http://ju1.cn/Public/Home/vip/js/jquery.lineProgressbar.js

1/**
2 * jQuery Line Progressbar
3 * Author: KingRayhan<[email protected]>
4 * Author URL: http://rayhan.info
5 * Version: 1.0.0
6 */
7
8(function($){
9	'use strict';
10
11	$.fn.LineProgressbar = function(options){
12
13		var options = $.extend({
14			percentage : null,
15			ShowProgressCount: true,
16			duration: 1000,
17
18			// Styling Options
19			fillBackgroundColor: '#3498db',
20			backgroundColor: '#EEEEEE',
21			radius: '0px',
22			height: '10px',
23			width: '100%'
24		},options);
25
26		return this.each(function(index, el) {
27			// Markup
28			$(el).html('<div class="progressbar"><div class="proggress"></div><div class="percentCount"></div></div>');
29			
30
31
32			var progressFill = $(el).find('.proggress');
33			var progressBar= $(el).find('.progressbar');
34
35
36			progressFill.css({
37				backgroundColor : options.fillBackgroundColor,
38				height : options.height,
39				borderRadius: options.radius
40			});
41			progressBar.css({
42				width : options.width,
43				backgroundColor : options.backgroundColor,
44				borderRadius: options.radius
45			});
46
47			// Progressing
48			progressFill.animate(
49				{
50					width: options.percentage + "%"
51				},
52				{	
53					step: function(x) {
54						if(options.ShowProgressCount){
55							$(el).find(".percentCount").text(Math.round(x) + "%");
56						}
57					},
58					duration: options.duration
59				}
60			);
61		////////////////////////////////////////////////////////////////////
62		});
63	}
64})(jQuery);