实现圆形进度条的两种方式
2019-07-30 本文已影响0人
鹤空
项目需要，需要实现扇形，环形进度条。具体效果如下
环形
使用svg 两个circle ，利用stroke-dasharray 特性实现进度条
逆时针时，交换前景色和背景色，并修改dash-array的顺序
在线查看效果https://codepen.io/rexyanglucky/pen/EqZLaQ
顺时针
环形 顺时针
逆时针
环形 逆时针
扇形
构建一个背景圆，其上覆盖左右两个矩形div，矩形中嵌套一个半圆（使用overflow hidden实现）
通过旋转左右两个矩形，漏出背景颜色，来模拟进度条
顺时针时，正向旋转，先旋转右侧矩形，在旋转左侧矩形
逆时针时，负向旋转，先旋转左侧矩形，在旋转又侧矩形，需要注意元素遮挡问题，加z-index处理
在线查看效果https://codepen.io/rexyanglucky/pen/wVgOdN
顺时针
扇形 顺时针
逆时针
扇形 逆时针
