sign/components/progressline/progressline.vue

<template>
	<view class="progressmax" :style="{'background-color': props.backgroundColor}">
		<view class="progressnow"
			:style="{'background-image': 'linear-gradient(' + props.frontColor + ',' + props.backColor + ')', 'width':props.progress}">
			<view class="progressani"></view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		progress: {
			type: String,
			default: '0'
		},
		backgroundColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.2)'
		},
		frontColor: {
			type: String,
			default: '#CDCF5C'
		},
		backColor: {
			type: String,
			default: '#EF8835'
		},
	});
</script>

<style lang="scss" scoped>
	.progressmax {
		width: 240rpx;
		height: 12rpx;
		border-radius: 9999px;
		// background-color: rgba(0, 0, 0, 0.2);

		.progressnow {
			// width: 90%;
			height: inherit;
			border-radius: inherit;
			// background-image: linear-gradient(#CDCF5C, #EF8835);

			.progressani {
				height: inherit;
				border-radius: inherit;
				background-image: inherit;
				animation: progress 2.5s infinite;
			}
		}
	}

	@keyframes progress {
		0% {
			background: rgba(255, 255, 255, 0.6);
			width: 0;
		}

		100% {
			background: transparent;
			width: 100%;
		}
	}
</style>