CSS logra un efecto de barra de progreso similar al valor de crecimiento

efecto:

Código:

<view>
    <view class="levelGrow">
	    <view class="progress"></view>
    </view>
    <view class="inner">
	    <view>{
   
   {level}}</view>
	    <view>成长值{
   
   {growth}}/{
   
   {nextGrowth}}</view>
	    <view>{
   
   {nextLevel}}</view>
    </view>
</view>

css:

.levelGrow{
  width: 80%;
  height: 60rpx;
  line-height: 60rpx;
  /* background-color: #3675F9; */
  background-color: #ffffff;
  opacity: 0.2;
  position: relative;
  margin-top: 30rpx;
}
.progress{
  width: 60%;
  height: 100%;
  background-color: #3675F9;
  position: absolute;
  top: 0;
  left: 0;
}
.inner{
  z-index: 99;
  width: 80%;
  height: 60rpx;
  line-height: 60rpx;
  position: absolute;
  top: 160rpx;
  left: 0;
  font-size: 24rpx;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

El principio de realización es la realización superpuesta del índice zy la posición 

Tenga en cuenta que el valor de ancho de progerss se puede controlar dinámicamente mediante js, el porcentaje se calcula de acuerdo con el valor y luego se realiza el efecto de la barra de progreso