iOS 环形下载进度条

// //获取环形路径（画一个圆形，填充色透明，设置线框宽度为10，这样就获得了一个环形）
// _progressLayer = [CAShapeLayer layer];//创建一个track shape layer
// _progressLayerframe = selfbounds;
// _progressLayerfillColor = [[UIColor clearColor] CGColor]; //填充色为无色
// _progressLayerstrokeColor = [[UIColor colorWithRed:100 green:048 blue:038 alpha:100] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
// _progressLayeropacity = 1; //背景颜色的透明度
// _progressLayerlineCap = kCALineCapRound;//指定线的边缘是圆的
// _progressLayerlineWidth = 4;//线的宽度
// UIBezierPath path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];//上面说明过了用来构建圆形
// _progressLayerpath =[path CGPath]; //把path传递给layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
//
// CAShapeLayer progressLayer = [CAShapeLayer layer];//创建一个track shape layer
// progressLayerframe = selfbounds;
// progressLayerfillColor = [[UIColor clearColor] CGColor]; //填充色为无色
// progressLayerstrokeColor = [[UIColor whiteColor] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
//
// CGFloat endA2 = 2 M_PI; //设置进度条起点位置
// UIBezierPath path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA2 clockwise:YES];//上面说明过了用来构建圆形
// progressLayerlineWidth = 28;//线的宽度
// progressLayerpath =[path2 CGPath]; //把path传递给layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
//
// [selflayer addSublayer:progressLayer];
// [selflayer addSublayer:_progressLayer];

// //生成渐变色
// _gradientLayer = [CALayer layer];
//
// //左侧渐变色
// CAGradientLayer leftLayer = [CAGradientLayer layer];
// leftLayerframe = CGRectMake(0, 0, selfboundssizewidth / 2, selfboundssizeheight); // 分段设置渐变色
// leftLayerlocations = @[@03, @09, @1];
// leftLayercolors = @[(id)[UIColor yellowColor]CGColor, (id)[UIColor greenColor]CGColor];
// [_gradientLayer addSublayer:leftLayer];
//
// //右侧渐变色
// CAGradientLayer rightLayer = [CAGradientLayer layer];
// rightLayerframe = CGRectMake(selfboundssizewidth / 2, 0, selfboundssizewidth / 2, selfboundssizeheight);
// rightLayerlocations = @[@03, @09, @1];
// rightLayercolors = @[(id)[UIColor yellowColor]CGColor, (id)[UIColor redColor]CGColor];
// [_gradientLayer addSublayer:rightLayer];
//
// [selflayer setMask:_progressLayer]; //用progressLayer来截取渐变层
// [selflayer addSublayer:_gradientLayer];

CGPoint center = selfcenter;
CGFloat radius = 12;
CGFloat startA = - M_PI_2; //设置进度条起点位置
CGFloat endA = -M_PI_2 + M_PI 2 _progress; //设置进度条终点位置

第二种

这样写吧：
<div class="meter">
<span style="width: 25%"></span>
</div>
meter {
height: 20px; / Can be anything /
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,03);
}
meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,03),
inset 0 -2px 6px rgba(0,0,0,04);
position: relative;
overflow: hidden;
}
orange > span {
background-color: #f1a165;
background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}
red > span {
background-color: #f0a3a3;
background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}
meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 2) 50%,
rgba(255, 255, 255, 2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}

---