实现圆型百分比进度条

先上效果

 直接上代码：

<view class="scoreBox">
	<view class="score">45</view>
	<view class="scoreNmae">简历分</view>
</view>

.scoreBox {
	width: 104rpx;
	height: 104rpx;
	border-radius: 50%;
	border: 10rpx solid rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	.score {
		font-size: 32rpx;
		color: #fff;
		text-align: center;
	}
	.scoreNmae {
		font-size: 32rpx;
		transform: scale(0.5);
		color: #fff;
	}
}
.scoreBox:before {
	content: '';
	position: absolute;
	top: -10rpx;
	left: -10rpx;
	width: 42rpx;    //宽度的大小 是 原宽度大小 104rpx  * 40%
	height: 104rpx;
	display: block;
	border-radius: 100% 0 0 100%/50%;   //半圆
	border: 10rpx solid #fff;
	border-right: none;    //因此右边距
}

上面注释的是关键；计算 width 可以改为动态配置的。

最终效果：

 可能还有点瑕疵，如果有大佬有更好的解决方案，欢迎留言交流。