Web特效背后的笨拙实现 -- 圆形进度条

效果

原理

最高效的实现方法当然是用CSS3中的SVG绘制Path,但是我们也可以用最基础的元素和样式构建出这种效果。

我们把整个圆弧分成两个半圆left-circleright-circle,分别包含在两个容器中right-wrapperleft-wrapper,容器都设置了overflow:hidden,比如下图中右侧圆弧left-circle包含在左侧容器right-wrapper中,但是初始状态我们是看不到left-circle

Web特效背后的笨拙实现 -- 圆形进度条_第1张图片

但随着进度递增,left-circle顺时针旋转进入right-wrapper的可见区域,此时我们才能看得到进度条的出现。

Web特效背后的笨拙实现 -- 圆形进度条_第2张图片

最终再结合right-circleleft-wrapper共同实现完整的进度条效果。

代码



circle

你可能感兴趣的:(Web特效背后的笨拙实现 -- 圆形进度条)