手搓一个简简单单进度条

懂得都懂就不细细解剖，直接上代码

也就是太无聊，心血来潮搓一个小玩意儿

div盒子

ini 复制代码

<div class="progress-box">
	<div class="progress-bar" :style="{ width: `${progress.width}%` }">
	<div class="progress-bar-inner">
		<div class="progress-light"></div>
	</div>
	</div>						</div>
							<div class="progress-text">
	<span class="num" ref="countDemo"
	:style="{ left: `calc(${progress.width}% - ${Amountspent < 99 ? 66 :Amountspent > 999 && progress.width < 50 ? 40 : 70}px)` }">
	$ {{ Amountspent }}
	</span>
							</div>

js

xml 复制代码

<script setup>
	import { onMounted,ref } from "vue"
        //进度条相关参数
        const progress = ref({
		width: 0,
		startValue: 0,
		endValue: 0
	})
        const Amountspent = ref(0)
        	const progressVal = (start = 0, end = 0) => {
		const startVal = Number(start ?? 0) || 0
		const endVal = Number(end ?? 0) || 0
		return {
			width: endVal > 0 ? Math.min(Math.max((startVal / endVal) * 100, 0), 100).toFixed(2) : 0,
			startValue: startVal,
			endValue: endVal
		}
	}
        
        	onMounted(() => {
                //接口请求获取参数
		getprogressInfo({}, (res) => {
			if (!res) return

			if (res && res.data) {
let { totaAmount, amountspent } = res.data
Amountspent.value=amountspent?amountspent:0
	progress.value = progressVal(amountspent, totaAmount)//进度条


			}

		})

	})
</script>

css

xml 复制代码

<style lang="scss">
.progress-box {
			position: relative;
			border-radius: 500px;
			background: rgba(255, 255, 255, 0.05);
			padding: 2px;
			height: 10px;
			margin-bottom: 7px;

			.progress-value {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				text-align: center;
				font-size: 12px;
				font-weight: 800;
				line-height: 1;
				text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
			}

			.progress-bar {
				height: 100%;
				width: 0;
				border-radius: 500px;
				background: #20ce2e;
				position: relative;
				box-shadow:
					0 0 3px 0 #00ff9d inset,
					0 0 7.5px 0 rgba(32, 206, 46, 0.6);

				.progress-bar-inner {
					position: absolute;
					right: -11px;
					top: -11px;
				}

				.progress-light {
					width: 30px;
					height: 30px;
					position: relative;
					border-radius: 50%;
					background-color: rgba(205, 222, 221, 0.1);

					&::before {
						content: "";
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 18px;
						height: 18px;
						border-radius: 50%;
						background-color: rgba(205, 222, 221, 0.1);
					}

					&::after {
						content: "";
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 10px;
						height: 10px;
						border-radius: 50%;
						background-color: #e7fefd;
					}
				}
			}
		}
                
                
		.progress-text {
			position: relative;
			/* padding: 2px; */
			height: 10px;
			margin-bottom: 10px;
			margin-right: 14px;

			.num {
				font-weight: 800;
				font-style: ExtraBold;
				font-size: 12px;
				line-height: 1.5;
				position: absolute;
				color: rgba(172, 188, 208, 1);
				width: 80px;
				display: inline-block;
				text-align: right;
			}
		}