vue 朝 两边走的进度条

<div v-if="(toWP>0&&toP<=0)||(toWP<=0&&toP>0)" class="display"
										style="align-items: flex-end;height: 28px;overflow: hidden;">
										<div class="flex-1">
											<div class="prog-box-right">
												<div class="prog-right-bar">
													<div class="pro-right-val" @click="transportBtn">
														{{toWP>0?'向工位运输':'回库运输'}}
													</div>
												</div>
											</div>
										</div>

									</div>
									<div v-if="toWP>0&&toP>0" class="display"
										style="align-items: flex-end;height: 28px;overflow: hidden;">

										<div class="flex-1">
											<div>
												<div class="prog-box">
													<div class="prog-bar">
														<div class="pro-val" @click="transportBtn">向工位运输</div>
													</div>
												</div>
											</div>

										</div>
										<div class="flex-1">
											<div class="prog-box-right">
												<div class="prog-right-bar">
													<div class="pro-right-val" @click="transportBtn">回库运输</div>
												</div>
											</div>
										</div>
									</div>
									<div>
										<transport :dialogVisible11="dialogVisible11" @transportClose="transportClose">
										</transport>
									</div>
								</div>

 css部分

.prog-box {
	height: 8px;
	background-color: #3170E4;

	width: 100%;
}

.prog-box .prog-bar {
	position: relative;
	background-color: #ffffff;
	height: 12px;
	width: 100%;
	animation: left ease-in 10s infinite;
}

.prog-box .prog-bar::before {
	position: absolute;
	top: 5px;
	margin-top: -5px;
	content: '';
	width: 8px;
	height: 6px;
	background-color: #3170E4;
	border: 1px solid #3170E4;
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-radius: 30px;
	right: -6px;
	transform: rotate(-180deg);
}


.prog-box .pro-val {
	width: 90px;
	text-align: center;
	font-size: 10px;
	color: #FFFFFF;
	padding: 2px;
	height: 15px;
	border-radius: 15px;
	background-color: rgba(85, 170, 255, 0.5);
	position: absolute;
	right: -40px;
	top: -20px;

}

.prog-box .pro-val::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 45px;
	border: 6px solid transparent;
	border-top: 6px solid rgba(85, 170, 255, 0.5);
}

@keyframes left {
	100% {
		width: 0%;
	}
}

.prog-box-right {
	height: 8px;
	background-color: #ffffff;
	width: 100%;
}

.prog-box-right .prog-right-bar {
	position: relative;
	background-color: #3170E4;
	top: 0;
	height: 8px;
	width: 100%;
	border-radius: 0px 10px 10px 0px;
	animation: right ease-in 10s infinite;
}

.prog-box-right .pro-right-val {
	width: 60px;
	text-align: center;
	padding: 2px;
	color: #F0F0F0;
	height: 15px;
	font-size: 10px;
	border-radius: 15px;
	background-color: rgba(85, 170, 255, 0.5);
	position: absolute;
	right: -26px;
	top: -20px;
}

.prog-box-right .pro-right-val::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 30px;
	border: 6px solid transparent;
	border-top: 6px solid rgba(85, 170, 255, 0.5);
}

@keyframes right {
	0% {
		width: 0;
	}
}