dz-app/components/mx-progress/mx-progress.vue

<template>
    <view class="progress-bar flex rounded" :style="{backgroundColor: bgColor}">
        <view class="progress-bar-thumb h-full rounded" :style="{flex: progress, backgroundColor: activeColor}"></view>
    </view>
</template>

<script setup>
import {createPropDefine} from "@/utils";

defineProps({
    progress: createPropDefine(0, Number),
    bgColor: createPropDefine('#CBFCEB'),
    activeColor: createPropDefine('#0FD296')
})
</script>

<style scoped lang="scss">
.progress-bar-thumb {
    transition: flex 0.5s ease;
}
</style>