css实现宽度100px，高度100px的环形进度条

实现环形进度条可以使用CSS3的旋转(rotate)和渐变(linear-gradient)属性，代码如下：

HTML部分：

<div class="circle">
  <div class="mask full">
    <div class="fill"></div>
  </div>
  <div class="mask half">
    <div class="fill"></div>
  </div>
  <div class="inside-circle"></div>
</div>

CSS部分：

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px auto;
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0,0,0,.2);
}

.circle .mask {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.circle .mask.full { left: 0; }

.circle .mask.half {
  left: 50%;
  transform: rotate(180deg);
  transform-origin: left top;
}

.circle .fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: blue;
  
  /*渐变效果*/
  background-image: linear-gradient(90deg, transparent 50%, white 50%),
    /*其他颜色同理*/
    linear-gradient($deg,blue 50%, transparent 50%);
}

.circle .inside-circle {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #f5f5f5;
}

注意：其中的deg是一个变量，可以通过JavaScript控制进度条的百分比，具体实现方式可以自行搜索。