进度条

效果如图：

结构代码：

<div class="demo">
 <div class="progress green">
 <div class="progress-bar" style="width:65%; background:#21da9a;"> 
 </div>
 </div>
 </div>

样式代码：

<style type="text/css">
 .demo{
 padding: 2em 0;
 background: #dbc1af;
 }
 .progress{
 height: 7px;
 background: #e3e3e3;
 border-radius: 0;
 box-shadow: none;
 margin: 40px 0 80px;
 overflow: visible;
 position: relative;
 }
 
 .progress .progress-bar{
 box-shadow: none;
 border-radius: 0;
 position: relative;
 -webkit-animation: animate-positive 2s; 
 animation: animate-positive 2s;
 }
 .progress .progress-bar:after{
 content: "";
 width: 20px;
 height: 20px;
 border-radius: 50%;
 box-shadow: 0 5px 5px rgba(0,0,0,0.6);
 background: #fff;
 position: absolute;
 right: -5px;
 top: -6px;
 }
 .progress .progress-value{
 width: 45px;
 height: 30px;
 line-height: 30px;
 border-radius: 3px;
 background: #393a3d;
 box-shadow: 0 5px 5px rgba(0,0,0,0.4);
 font-size: 15px;
 font-weight: 700;
 color: #fff;
 text-align: center;
 position: absolute;
 bottom: 30px;
 right: -17px;
 }
 .progress .progress-value:after{
 content: "";
 border-top: 7px solid #393a3d;
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 position: absolute;
 bottom: -7px;
 left: 35%;
 }
.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background-color: #337ab7;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
	-webkit-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease;
	background:#d3474a;
}

 .progress.green .progress-bar:after{ border: 5px solid #21da9a; }
 @-webkit-keyframes animate-positive{
 0% { width: 0; }
 }
 @keyframes animate-positive{
 0% { width: 0; }
 }
 </style>