uniapp 自定义progress

效果图:

图一：

图二：

图三：

图一代码实现

<view class="progress px-3">
    <view class="percent" :style="{ left:'30%' }">
        已筹xxx
    </view>
    <view class="price" :style="{ left:'30%' }">{{ info.helped_price }}</view>
    <progress :percent="info.helped_price" stroke-width="10" activeColor="#ff0000" />
    <view class="target">目标金额{{ info.target_price }}</view>
</view>

.progress {
    position: relative;
    margin: 60rpx 0;

    .target {
        position: absolute;
        top: -60rpx;
        right: 20rpx;
        color: #999;
    }

    .percent {
        position: absolute;
        top: -80rpx;
        transform: translateX(-50%);
        color:red;

        &::after {
            width: 5rpx;
            height: 50rpx;
            display: block;
            content: '';
            position: relative;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: red;
        }
    }

    .price {
        position: absolute;
        top: 20rpx;
        transform: translateX(-50%);
        color:red;
    }
}

图二代码如下：

<view class="progress px-3">
    <view
        class="percent"
        :style="{
            left: info.ratio,
            background:'url(气泡图)'
        }"
    >
        已筹{{ info.ratio }}助力金
    </view>
    <view class="price" :style="{ left: info.ratio }">{{ info.helped_price }}</view>
    <view class="progress-box">
        <image
            class="light"
            :style="{ left: info.ratio }"
            src="'效果图'"
            mode="heightFix"
        ></image>
        <view class="progress-current" :style="{ width: info.ratio }"></view>
    </view>
    <view class="target">目标助力金{{ info.target_price }}</view>
</view>

.progress {
    position: relative;
    margin: 70rpx 0 20rpx;
    padding-bottom: 80rpx;

    .target {
        position: absolute;
        bottom: 35rpx;
        right: 20rpx;
        color: #fff;
        font-size: 20rpx;
    }

    .percent {
        width: 250rpx;
        height: 100rpx;
        position: absolute;
        top: -80rpx;
        transform: translateX(-50%);
        text-align: center;
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx;
    }

    .price {
        position: absolute;
        top: -10rpx;
        transform: translateX(-100%);
        color: #fff;
        font-size: 20rpx;

        // #ifdef H5
        -webkit-transform: scale(0.8);
        transform-origin: left;
        // #endif

        // #ifdef MP-WEIXIN
        top: -9rpx;
        // #endif
    }
}

.progress-box {
    width: 100%;
    height: 22rpx;
    background: #ffdbc5;
    border-radius: 22rpx;

    .light {
        height: 22rpx;
        position: absolute;
        top: 0;
        transform: translateX(-100%);
    }

    .progress-current {
        height: 22rpx;
        background: linear-gradient(#ffc29d 50%, #ffb98f);
        border-radius: 11rpx;
    }
}

图三代码如下：

<view class="flex-between">
    <view class="progress px-3">
        <view
            class="progress-percent"
            :class="ratio > 80 ? 'radius-right' : 'radius-left'"
            :style="{
                left: ratio > 80 ? '' : left + '%',
                right: ratioo > 80 ? right + '%' : ''
            }"
        >
            已参与{{ number || 0 }}人
        </view>
        <view class="progress-box">
            <image
                class="light"
                :style="{ left: left + '%' }"
                :src="$util.img('效果图')"
                mode="heightFix"
                v-if="ratio > 1"
            ></image>
            <view class="progress-current" :style="{ width: ratio + '%' }"></view>
        </view>
    </view>
    <view
        class="target"
        :style="{ width: (num.toString().length + 3) * 13 + 'px' }"
    >
        目标{{ num || 0 }}人
    </view>
</view>

this.ratio = ((参与人数 / 目标人数) * 100).toFixed(2);
this.left = 0 === this.ratio ? 1 : (this.ratio >=100) ? 97 :this.ratio;
this.right = 98 - this.ratio <= 0 ? 4 : 100 - this.ratio + 3;

.flex-between {
    display: flex;
    justify-content: space-between;
}

.radius-right {
    border-radius: 23rpx 23rpx 0 23rpx;
}

.radius-left {
    border-radius: 23rpx 23rpx 23rpx 0;
}

.progress {
    position: relative;
    width: calc(100% - 50px);

    &-percent {
        position: absolute;
        background: linear-gradient(to right, #eb8457, #e96e66, #fb82bd);
        top: -55rpx;
        /* #ifdef MP-WEIXIN */
        top: -46rpx;
        /* #endif */
        text-align: center;
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 30rpx;
    }

    &-box {
        width: 100%;
        height: 22rpx;
        background: #fff0e8;
        border-radius: 22rpx;

        .light {
            height: 22rpx;
            position: absolute;
            top: 0;
            margin-left: -22rpx;
        }

        .progress-current {
            max-width: 100%;
            height: 22rpx;
            background: linear-gradient(#ed8659 50%, #bd5a2a);
            border-radius: 11rpx;
        }
    }
}

.target {
    text-align: center;
    color: #aa3029;
    font-size: 20rpx;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}