浏览页面的圆形倒计时css

<div class="circl" @click="share">
            <div class="left" :class="{hid2:height2,color2:color2}" ></div>
            <div class="right" :class="{hid1:height1,color1:color1}" ></div>
            <div class="text">
                <span>{{time}}s</span>
                <span>分享签到</span>
            </div>
        </div>

.circl{
        width: 60px;
        height: 60px;
        border-radius: 30px;
        overflow: hidden;
        background: $themeColor1;
        position:fixed;
        right: 14.5px;
        bottom:17px;
        .left{
            width: 50%;height: 100%;position: absolute;left:0;top: 0;background: #4a77ad;
            transition: all 5s linear;
            border-bottom-left: 30px;
            border-top-left: 30px;
            transform-origin:right center;
            z-index:1;
        }
        .right{
            width: 50%;height: 100%;position: absolute;right:0;bottom: 0;background: #4a77ad;
            transition: all 5s linear;
            border-bottom-right-radius: 30px;
            border-top-right-radius: 30px;
            transform-origin:left center;
            z-index:2;
        }
        .hid1{transform: rotateZ(180deg);}
        .hid1.color1{background: $themeColor1;transform:rotateZ(0deg); transition: all 0s;}
        .hid2{transform: rotateZ(180deg);}
        .hid2.color2{background: $themeColor1;transition: all 0s;}
        .text{
            font-size: 12px;
            position: absolute;
            width: 100%;height: 100%;
            text-align: center;z-index: 4;color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }