Html
    Css
    Js

    
                        
* {
	margin:0
}
.step-body {
	position:relative;
}
.step-header {
	width:100%;
	margin:0 auto;
	display:none;
}
.step-header ul {
	padding:0;
}
.step-header li {
	list-style-type:none;
	text-align:center;
	float:left;
	position:relative;
}
.step-header li p {
	margin-top:30px;
	margin-bottom:5px;
	font-size:14px;
	color:#625454;
}
.step-header li span {
	position:relative;
	margin:0 auto;
	font-size:18px;
	font-family:Arial;
	color:#625454;
	height:25px;
	line-height:25px;
	display:block;
}
.step-header li.step-active span {
	color:white;
}
.step-header li.step-active p {
	color:#466faa;
}
.step-bar,.step-bar-active {
	height:13px;
	border-radius:12px;
}
.step-bar {
	width:100%;
	position:relative;
	border-radius:12px;
	z-index:-1;
	height:5px;
	top:70px;
}
.step-bar-active {
	width:0px;
	height:5px;
}
.step-list {
	display:none;
	clear:both;
}

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

jQuery步骤进度条控制代码

0