前端学习笔记：使用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="progress-inner-circle"></div>
</div>

CSS部分

.progress-box {
    width: 100px;
    height: 50px;
    overflow: hidden;
    position: relative;
    margin: 100px auto 0px;
}

.progress-circle {
    width: 100px;
    height: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px; 
    background: #d5aa7c;
}

.progress-inner-circle {
    width: 90px;
    height: 45px;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px; 
    position: absolute;
    top: 5px;
    left: 5px;
    background: #e9c6a2;
}

.progress-rotate {
    width: 100px;
    height: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px; 
    background: #fff;
    transform-origin: center top;
}

JS部分(为了方便演示，使用了jQuery)

let rotate = 180* Math.random();
$(".progress-rotate").css({
    "transform": "rotate(" + rotate + "deg)"
})

最终呈现效果

去掉progress-box的overflow属性我们看到其实是这样的

结语

可以看到，最后展现的效果没有设计图美观，但是已经够用了。也不知道有没有别的实现方式~好了，接下来就要老老实实学习SVG的知识了--!