微信小程序圆环

a.js

c:{
            c0:0,
            c1:0,
            mh:false
        }

function uc(page,x){
    const c={
        c:{
            c0:x<0.5?x:0.5,
            c1:x>=0.5?x-1:0,
            mh:x>=0.5,
            bColor:'yellow',
            fColor:'red',
        }
    };
    console.log(c);
    page.setData(c);
}

a.wxml

    <view class="circle-w">
        <view class="bg" style="border-color:{{c.bColor}}"></view>
        <view class="a" style="transform: rotate({{c.c0}}turn); border-color: rgba(0,0,0,0) rgba(0,0,0,0) {{c.fColor}} {{c.fColor}}"></view>
        <view class="b"
              style="transform: rotate({{c.c1}}turn);border-color: rgba(0,0,0,0) rgba(0,0,0,0) {{c.mh? c.fColor + ' ' + c.fColor:c.bColor + ' ' + c.bColor}};"></view>
    </view>

a.wxss

.circle-w{
    width: 100px;
    height: 100px;
    transform: rotate(0.125turn);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.circle-w>view{
    padding: 0;
    margin: 0;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    /*border-color: rgba(0,0,0,0) rgba(0,0,0,0) red red;*/
    border-radius: 50%;
    border-width: 0.5rem;
}
.circle-w .bg{
    border-color: gray;
}