css实现环形进度条

遇到一个需求,需要实现一个环形进度条,下面是一种方法

环形进度条

实现思路:背景画一个圆形,在圆形上左右两边各覆盖一个半圆,顺时针旋转右边的半圆直至180deg,此时右边的半圆转到了左边,左右两个半圆完全重叠,下一步恢复右边半圆到初始位置,且背景色设置为与背景圆形一致,接着顺时针旋转左边半圆180deg(因为左边半圆渲染层级在右半圆的下方),即可完成一个完整的旋转进度,在上方盖一个同心小圆即可实现环形进度条的效果。

层级旋转效果:

完整实现:

中间透明的环形进度条

又想,如果要求中间带透明度的或者中间完全透明的环形进度条怎么实现呢?

稍微调整一下,将半圆用border显示,底层背景用内阴影shadow表示,即可实现效果

代码:


以上~