实现圆形进度条的两种方式

项目需要，需要实现扇形，环形进度条。具体效果如下

环形

使用svg 两个circle ，利用stroke-dasharray 特性实现进度条

逆时针时，交换前景色和背景色，并修改dash-array的顺序

在线查看效果https://codepen.io/rexyanglucky/pen/EqZLaQ

顺时针

环形 顺时针

逆时针

环形 逆时针

扇形

构建一个背景圆，其上覆盖左右两个矩形div，矩形中嵌套一个半圆（使用overflow hidden实现）

通过旋转左右两个矩形，漏出背景颜色，来模拟进度条

顺时针时，正向旋转，先旋转右侧矩形，在旋转左侧矩形
逆时针时，负向旋转，先旋转左侧矩形，在旋转又侧矩形，需要注意元素遮挡问题，加z-index处理

在线查看效果https://codepen.io/rexyanglucky/pen/wVgOdN

顺时针

扇形 顺时针

逆时针

扇形 逆时针