圆形进度条css样式

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代码

以下样式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;//百分比数字的底色
    }