由 dawei 最近需求需要一个显示百分比的加载条。然而去搜索了很久，没能发现比较满意的组件，只好自己解决了。当然对于大多数前端而言，这个并不是特别难的，可能思路众多，然而面对React Native似乎就有点相形见绌了。解决这样的问题，我们还是得回归前端本身，看看有什么可以嫁接的方案没。
前端常规制作进度条方法
前端实现相对容易点，我们可以用canvas去绘制圆，也可以用SVG去绘制.
使用SVG
<svg style="width:2.8rem" version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 130 130" overflow="visible" enable-background="new 0 0 130 130" id="progress">
<circle fill="none" stroke="#ccc" stroke-width="4" stroke-miterlimit="10" cx="64.8" cy="64.8" r="59.8"></circle>
<circle class="styled" fill="none" stroke="#2ecc71" stroke-width="4" stroke-miterlimit="10" cx="64.8" cy="64.8" r="59.8" style="stroke-dashoffset: -93.9336; stroke-dasharray: 375.734;"></circle>
</svg>
SVG主要是用Circle进行绘制，关于Circle使用可以看 这里 。我们先绘制***个圆，用于底色。接下来我们只需要在上面绘制一个带有色彩的圆(切记不要填充颜色fill="none")。这个时候我们需要了解两个关键的属性;
stroke-dasharray: 用于控制路径绘制中虚线和间距的。例子中的即圆的周长。
stroke-dashoffset: 用于指定距离虚线绘制的起点
如果我们知道了这个的话，我们只需要计算出圆的周长
var CircleLength = R * 2 * Math.PI;
var PercentOffset = － CircleLength * yourPercent;
然后将这个第二个Circle属性赋予到style中：
style="stroke-dashoffset: -93.9336; stroke-dasharray: 375.734;"
SVG相对来说还算是比较易用的解决方案， Demo点击预览;
使用 CSS渐变
还有一个更加直接的方法，就是利用 CSS3 中的linear-gradient：
效果如图：
我们只需要指定line-grdient中通过旋转的角度然后设置好间隔的渐变百分比就行啦。
background-image:linear-gradient(90deg, transparent 50%, #16a085 50%), linear-gradient(90deg, #eee 50%, transparent 50%);
下图为隐藏掉遮挡的小圆的样子。