css横向进度条

css横向进度条、

<div class="tabbox222">
	<ul>
	<li v-for="item in data" :key="item.id">
			<span class="time">2020-2-1</span> //时间
			<div class="jindu"></div>			//横线
			<div :class="item.type == 1? 'dian2':'dian'"></div>  //进度标识
			<span class="namessss">{{item.name}}</span>  //名字
		</li>
	</ul>
</div>

export default {
data() {
		return {
			data: [
				{time:'2020-1-2',name:'开始生产',type:1,id:1,},
				{time:'2020-1-2',name:'开始生产',type:1,id:2,},
				{time:'2020-1-2',name:'开始生产',type:1,id:3,},
				{time:'2020-1-2',name:'开始生产',type:0,id:4,},
				{time:'2020-1-2',name:'开始生产',type:0,id:5,}
			]
		}
	},
}

下方css样式

.tabbox222{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 97%;
	min-height: 130px;
	// background-color: red;
	ul{
		padding: 5% 0 0 4%;
	}
	li{
		position: relative;
		display: block;
		float: left;
	}
	.time{
		font-size: 12px;
		color: wheat;
	}
	.jindu{
		border: 5px solid #FE9406;
		width: 110px;
	}
	.dian{
		width: 10px;
		height: 10px;
		border: 5px solid rgb(255, 255, 255);
		position: absolute;
		top: 43%;
	}
	.dian2{
		width: 10px;
		height: 10px;
		border: 5px solid rgb(241, 17, 17);
		position: absolute;
		top: 43%;
	}
	.namessss{
		font-size: 12px;
		color: #08AEA0;
	}
}