HTML代码

<view class="con">
                    <view class="percent-circle percent-circle-left">
                        <view class="left-content"></view>
                    </view>
                    <view class="percent-circle percent-circle-right">
                        <view style="transform: rotate(30deg);" class="right-content">        
                        </view>
                    </view>
                    <view class="text-circle">30%</view>
</view>

CSS代码

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
以下样式100upx是50upx的2倍，这是尺寸比例
.con {
        position: relative;
        display: inline-block;
        height: 100upx;
        width: 100upx;
    }

    .percent-circle {
        position: absolute;
        height: 100%;
        background: #46A4DA;//走过的进度条颜色
        overflow: hidden;
    }

    .percent-circle-right {
        right: 0;
        width: 50upx;
        border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;
    }

    .right-content {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: rotate(0deg);
        border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;
        background: #ccc;//进度条底色
    }

    .percent-circle-left {
        width: 50upx;
        border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;
    }

    .left-content {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform-origin: right center;
        transform: rotate(0deg);
        border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;
        background: #ccc;//进度条底色
    }
    
    .text-circle {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80%;
        width: 80%;
        left: 10%;
        top: 10%;
        border-radius: 100%;
        background-color: #f2f2f2;//百分比数字的底色
    }

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄