百分比进度条需要利用两个同心圆，做出进度条的形状以及进度数字。底层放一个大圆作为进度条，并设置好进度条的颜色。顶层放一个小圆内部写上当前进度数字。那么如何利用这个进度条实时的表现当前进度呢？我们需要两个半圆，并利用其相互遮掩的技术来实现进度的灵活展现。这两个半圆位于中间层，为了方便旋转我们还需要用到裁剪的技术。工具/原料moreCSS3方法/步骤1/4分步阅读

50%以内（或者说180度以内）

上层遮盖层的颜色为进度条未占有时的背景色。如下图所示：红色边框部分为上层遮盖层。

2/4

50%以上

上层遮盖层的颜色为进度条占有时的背景色（即：进度条前景色）。如下图所示：红色边框部分为上层遮盖层。这时上层遮盖层和原有的底层背景组成完整的进度条。

3/4

关键技术

1. 圆角

Border-radius:50%

2. 裁剪

Clip:rect(上，右，下，左)利用裁剪是为了方便同心旋转。

3. 旋转遮盖

transform:rotate(30deg);旋转遮

4/4

!DOCTYPE html

html

head

style

div

{

position:absolute;

width:200px;

height:200px;

border-radius:50%;

}

/* 圆底 */

#circle

{

position:relative;

border:1px solid black;

background-color:yellow;

}

/* 上半部分 */

#t{

border:3px solid #F00;

background-color:white;

clip:rect(0px,auto,100px,auto);

transform:rotate(30deg);

background-color:#ccc;

}

/* 下半部分 */

#b{

border:3px solid #00F;

background-color:white;

clip:rect(100px,auto,auto,auto);

background-color:#ccc;

}

/* 中心白 */

#p{

width:150px;

height:150px;

line-height:150px;

left:25px;

top:25px;

text-align: center;

border-radius:50%;

background-color:#FFFFFF;

}

/style

script

function setPercent(v){

if(v0.5){

document.getElementById(t).style.backgroundColor=#ccc;

document.getElementById(t).style.transform=rotate(+(360*v)+deg);

}else{

document.getElementById(t).style.backgroundColor=yellow;

document.getElementById(t).style.transform=rotate(+(360*(v-0.5))+deg);

}

document.getElementById(p).innerHTML=(v*100)+%;

}

/script

/head

body

div id=circle

div id=b/div

div id=t/div

div id=p/div

/div

p

input style=margin-left:50px; type=button value=30% onclick=setPercent(0.3)/

input type=button value=70% onclick=setPercent(0.7)/

/p

/body

/html

注意事项

注意进度条的开启方向

CSS3WEB进度条CSS进度条CSS圆形进度条