这个是在进度条圆形中又画了一个空白的小圆，然后写的文字
http://blog.csdn.net/tangdou5682/article/details/52778766
你看下这个这是html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超富创意的CSS3飞机跑道进度条动画DEMO演示</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h3 class="progressbar-title">HTML5</h3>
<div class="progress">
<div class="progress-bar" style="width: 55%background:#005394">
<span>55%</span>
</div>
</div>
<h3 class="progressbar-title">CSS3</h3>
<div class="progress">
<div class="progress-bar" style="width: 85%background:#d9534f">
<span>85%</span>
</div>
</div>
<h3 class="progressbar-title">Java Script</h3>
<div class="progress">
<div class="progress-bar" style="width: 40%background:#f0ad4e">
<span>40%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:centerclear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
这是css代码
body{
background: #a8b1b6
color: #2fa0ec
font-weight: 500
font-size: 1.05em
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo
}
a{color: #d8dedcoutline: none}
a:hover,a:focus{color:#74777btext-decoration: none}
.demo{width: 100%padding: 2em 0}
.progress{
height: 30px
line-height: 35px
background: #809495
box-shadow: none
padding: 6px
margin-top:20px
overflow: visible
border-radius:10px
}
.progress:after{
content: ""
display: block
border-top: 4px dashed #fff
margin-top:8px
}
.progressbar-title{
color:#d8dedc
font-size:15px
margin:5px 0
font-weight: bold
}
.progress .progress-bar{
position: relative
border-radius: 10px 0 0 10px
animation: animate-positive 2s
}
.progress .progress-bar span{
position: absolute
top: -50px
right: -40px
color: #fff
display: block
font-size: 17px
font-weight: bold
padding: 5px 7px
background: #333
border-radius: 0 0 5px 5px
}
.progress .progress-bar span:before{
content: ""
position: absolute
bottom: -14px
left: 18px
border: 7px solid transparent
border-top: 7px solid #333
}
.progress .progress-bar span:after{
content: "\f072"
font-family: fontawesome
font-size: 48px
color: #333
position: absolute
top: 51px
right: 6px
transform: rotateZ(48deg)
}
@-webkit-keyframes animate-positive {
0% { width: 0%}
}
@keyframes animate-positive {
0% { width:0%}
}
1、鼠标右击行号前面2、在出现的菜单中选择 “语法验证器设置(V)”3、点击 “语法验证器设置(V)” 后在新出现的对话框中如下图4、从图中我们可以看到css、html、javascript、php、sdocml语法全关闭状态。开启javascript语法验证器，直接点击×，然后有个弹窗点击“是”，然后会出现一个进度条，等待完成即可
