效果图：
gif.gif
注意点：
1、在设置贝塞尔曲线绘制圆环的时候，半径必须减去线宽的一半。
2、蒙版的使用。蒙版与蒙版盖住的layer，最终显示的蒙版的颜色与形状，所以蒙版颜色fillColor设置为透明色。
第一步，绘制背景圆环。
1.png
绘制贝塞尔曲线的时候需要注意默认从0 开始，参考坐标系。贴一张图
20160923141208631.png
需要注意的是，绘制圆环，填充色设置为透明，描边色需要设置。贝塞尔曲线的开始的位置为 -0.5 *M_PI，结束位置为 1.5 *M_PI；
//背景灰色
CAShapeLayer *shapeLayer =[[CAShapeLayer alloc]init];
shapeLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.width);
shapeLayer.lineWidth = _lineWidth; //线宽
shapeLayer.fillColor =[UIColor clearColor].CGColor; //填充颜色
shapeLayer.strokeColor = LBColor(50, 50, 50, 1).CGColor; //描边颜色
CGPoint center = CGPointMake((rect.size.width )/2, (rect.size.width)/2);
UIBezierPath *bezierPath =[UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width- _lineWidth)/2 startAngle:-0.5 *M_PI endAngle:1.5 *M_PI clockwise:YES]; //一定要减去线宽的一半
shapeLayer.path = bezierPath.CGPath;
[self.layer addSublayer:shapeLayer];
第二步绘制渐变色
2.png
如上面，是从上到下的蓝色渐变。
关于梯度渐变引用一张图
梯度.png
根据需要选择轴向渐变还是径向渐变。
//渐变色，加蒙版，显示的蒙版的区域
CAGradientLayer *gradientLayer =[[CAGradientLayer alloc]init];
gradientLayer.frame = self.bounds;
gradientLayer.colors = @[(id)[UIColor hexStringToColor:@"#5F98FC"].CGColor,(id)[UIColor hexStringToColor:@"#47BFFC"].CGColor];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1); //径向渐变
[self.layer addSublayer:gradientLayer];
为需要添加蒙版的layer添加蒙版
self.foreLayer = [CAShapeLayer layer];
self.foreLayer.frame = self.bounds;
self.foreLayer.fillColor =[UIColor clearColor].CGColor;
self.foreLayer.lineWidth = self.lineWidth;
self.foreLayer.strokeColor = [UIColor redColor].CGColor; //颜色没用
self.foreLayer.strokeEnd = 0;
self.foreLayer.lineCap = kCALineCapRound;
self.foreLayer.path = bezierPath.CGPath;
gradientLayer.mask = self.foreLayer;
因为贝塞尔曲线开始的位置是-0.5 *M_PI，strokeEnd 决定了描边的进度。
demo 地址：渐变圆环进度
