前端学习笔记：使用CSS+JS实现半圆环进度条

前言

我所在的公司是一家电商公司，用户最常使用的场景就是领取优惠券。最近，我们公司决定修改“领券中心”的呈现效果，于是优惠券有了一个新的展现方式。

那么，要怎么去实现这样的样式呢？查了一下淘宝，PC端做了限制，无法直接查看手机端的优惠券效果；京东倒是上看到优惠券的样式，可都是直的，没什么难度。最后还是在苏宁上找到了类似的样式，发现是通过SVG来实现的。

此前我没有接触过SVG，这个项目也急着上线，所以我想通过掌握的CSS+JS来实现这个呈现效果。

实现过程

具体的思路是这样的：

• 首先画两个半圆组成一个圆环。
• 再画一个倒着的半圆，通过overflow：hidden隐藏。
• 通过JS获取到优惠券的领取百分比。
• 将倒着的半圆通过CSS3的transform的rotate属性进行旋转，旋转角度由优惠券的领取百分比决定。

html部分

<div class="progress-box">
   <div class="progress-circle"></div>
   <div class="progress-rotate"></div>
   <div class=