然后再次在这个矩形区域里面定义一个或者多个区域，同样给边框上个颜色，然后用border-radius:50%；这样就会让此矩形区域变换为圆形，依次在里面添加一个或者多个即可；
最后在你定义的圆形区域里面打上文字，如果那里不合适，用css控制一下区域或者文字；
希望我的回答能帮到你；
HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>
CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
}
运行效果：
单从你上面所截图并看不出来是怎么得来的圆圈，请在网上移动到dl标签上看看是否写了命令
存用css3写的话，必须有两个圆圈组合，大圆是半透明的，小圆是不透明的，例如
<dl class="one">
<dt>111</dt>
</dl>
css：
*{ margin: 0padding: 0}
body{ font-size:70%font-family: verdana, hevetica, arial, sans-serif}
.one{
border:solid 0px #ccc
width: 100px
height: 100px
background: #ccc
border-radius: 50px
opacity: 0.3
position: relative
top:50px
left: 100px
}
.one dt{
width: 90px
height: 90px
line-height: 90px
background: #111
border-radius: 45px
text-align: center
color: #fff
position: absolute
top: 5px
left: 5px
}
我这个是在火狐浏览的要兼容各浏览器要写内核前缀，，切记~
