微信小程序view叠加效果

需要实现如下效果：

WXML代码如下：

<view class='evaluationContentItemLayout'>

<text class='evaluationContentText'>{{item.name}}（{{item.total}}）</text>

<progress class='evaluationContentProgress' percent='{{item.progress}}' stroke-width='26' backgroundColor='#fff' color='#09BB07'></progress>

</view>

WXSS代码如下：

.evaluationContentItemLayout{

width: auto;

height: auto;

position: relative;

}

.evaluationContentText {

font-size: 28rpx;

color: #101010;

position: absolute;

margin-left: 10rpx;

top: 5rpx;

}

.evaluationContentProgress{

}

最终效果：

颜色效果比较容易实现，故未做记录。