jquery实现百分比或记分进度条

jquery实现百分比记分进度条

1.先看效果

2.代码如下

jquery.lineProgressbar.js代码如下

(function($){
	'use strict';
	
	$.fn.LineProgressbar = function(options){

		var options = $.extend({
			percentage : null,
			ShowProgressCount: true,
			duration: 1000,

			// Styling Options
			fillBackgroundColor: '#3498db',
			backgroundColor: '#EEEEEE',
			radius: '0px',
			height: '10px',
			width: '100%'
		},options);

		return this.each(function(index, el) {
			// Markup
			$(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></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
			});

			// Progressing
			progressFill.animate(
				{
					width: options.percentage + "%"
				},
				{	
					step: function(x) {
						if(options.ShowProgressCount){
							$(el).find(".percentCount").text("("+Math.round(x) + "分"+")");
						}
					},
					duration: options.duration
				}
			);
		});
	}
})(jQuery);

jquery.lineProgressbar.css样式代码如下

#progressbar1{
	display: flex;
	height: 15px;
}
.progressbar {
    width: 50%;
	margin-top: 5px;
	position: relative;
	background: #182746 !important;
	border-radius: 6px !important;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

.proggress{
	height: 8px;
	width: 10px;
	background: linear-gradient(to right, rgb(13, 93, 176), rgb(32, 177, 223)) !important;
	border-radius: 6px !important;
}

.percentCount{
	white-space: nowrap;
	margin-left: 10px;
	font-size: 14px;
}

这样就可以实现记分条，百分比的话只需要将分改成%就OK了。

直接用！！！