Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.mature-progress {
	margin-top:15px;
}
.mature-progress .mature-progress-top {
	position:relative;
	padding-left:15px;
	font-size:18px;
	height:40px;
	line-height:40px;
}
.mature-progress .mature-progress-top:before {
	content:'';
	display:block;
	position:absolute;
	width:8px;
	height:20px;
	left:0;
	top:10px;
	background:#e10482;
	border-radius:5px;
}
.mature-progress .mature-progress-bottom {
	border-radius:5px;
	border:#f2f2f2 solid 1px;
	padding:15px;
	position:relative;
	height:125px;
	width:720px;
}
.mature-progress .mature-progress-bottom p > span {
	color:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box {
	height:105px;
	padding:10px 0 0 10px;
	position:absolute;
	top:60px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.bgtwos {
	z-index:1;
	top:55px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.bgtwos dl dt {
	border:#f2f2f2 solid 5px;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v0 dl:nth-of-type(1) dt {
	background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v1 dl:nth-of-type(2) dt {
	background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v2 dl:nth-of-type(3) dt {
	background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v3 dl:nth-of-type(4) dt {
	background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box.v4 dl:nth-of-type(5) dt {
	background:#e10482;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl {
	width:70px;
	text-align:center;
	float:left;
	margin-right:65px;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl dt {
	width:40px;
	height:40px;
	background:#999999;
	color:#fff;
	text-align:center;
	line-height:44px;
	border-radius:50%;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	z-index:3;
}
.mature-progress .mature-progress-bottom .mature-progress-box dl dd {
	padding-top:5px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box {
	position:absolute;
	width:676px;
	height:15px;
	border-radius:10px;
	border:#f2f2f2 solid 5px;
	background:#fff;
	z-index:2;
	top:20px;
	left:22px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i {
	position:absolute;
	height:15px;
	background:#e10482;
	left:36px;
	top:0;
	width:0;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-2 {
	left:171px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-3 {
	left:305px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-4 {
	left:440px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i.progress-box-5 {
	left:576px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span {
	position:absolute;
	display:inline-block;
	*zoom:1;
	*display:inline;
	background:#fff;
	border-radius:5px;
	height:30px;
	line-height:30px;
	font-weight:normal;
	font-size:12px;
	font-style:normal;
	border:#cccccc solid 1px;
	right:-80px;
	top:-50px;
	padding:0 10px;
	width:135px;
	text-align:center;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span:before {
	content:'';
	display:block;
	position:absolute;
	border-width:10px;
	border-style:solid;
	border-color:#ccc transparent transparent transparent;
	bottom:-20px;
	left:50%;
	margin-left:-10px;
}
.mature-progress .mature-progress-bottom .mature-progress-box .progress-box i span:after {
	content:'';
	display:block;
	position:absolute;
	border-width:10px;
	border-style:solid;
	border-color:#fff transparent transparent transparent;
	bottom:-19px;
	left:50%;
	margin-left:-10px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery会员等级动态进度条

现在各个商城或者电商针对不同的会员采用了不用的优惠政策。会员等级的设立已经是个趋势。更加能够吸引客户的消费欲望!

0