自适应导航条.md

html

  <div class="ui-progress-lateral">
		<ul class="ui-progress-wrapper">
			<li class="ui-progress-item finish">
				<i class="ui-progress-done iconfont icon-correct02"></i>
				<i class="ui-progress-doing">1</i>
				<p class="ui-progress-text">完成进度</p>
			</li>

			<li class="ui-progress-item current">
				<i class="ui-progress-done iconfont icon-correct02"></i>
				<i class="ui-progress-doing">2</i>
				<p class="ui-progress-text">当前进度</p>
			</li>

			<li class="ui-progress-item wait">
				<i class="ui-progress-done iconfont icon-correct02"></i>
				<i class="ui-progress-doing">3</i>
				<p class="ui-progress-text">未进行时</p>
			</li>

			<li class="ui-progress-item wait">
				<i class="ui-progress-done iconfont icon-correct02"></i>
				<i class="ui-progress-doing">4</i>
				<p class="ui-progress-text">未进行时</p>
			</li>
		</ul>

		<div class="ui-progress-line">
			<p class="ui-line-item light-line"></p>
			<p class="ui-line-item deep-line" style="width: 33%;"></p>
		</div>
	</div>

less

  /* 进度条 */

@finish-color: #0A5ECC;

@wait-color: #B5CEEF;

@wait-text-color: #898E94;

.ui-progress-lateral {
	position: relative;

	.ui-progress-wrapper {
		position: relative;
		text-align: justify;
		height: 56px;
		overflow: hidden;

		&:after {
			content: ".";
			display: inline-block;
			width: 100%;
			overflow: hidden;
			z-index: -1;
		}

		i {
			display: block;
			width: 30px;
			height: 30px;
			margin: 0 auto;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
			font-style: normal;
		}
	}

	.finish {
		.ui-progress-done {
			background-color: @finish-color;
			color: #fff;
			font-size: 16px;
		}

		.ui-progress-doing {
			display: none;
		}
	}

	.current {
		.ui-progress-done {
			display: none;
		}

		.ui-progress-doing {
			color: @finish-color;
			border: 1px solid @finish-color;
		}
	}

	.wait {
		.ui-progress-done {
			display: none;
		}

		.ui-progress-doing {
			color: @wait-color;
			border: 1px solid @wait-color;
		}

		.ui-progress-text {
			color: @wait-text-color;
		}
	}

	.ui-progress-item {
		display: inline-block;
		padding: 0 5px;
		text-align: center;
		background-color: #fff;
	}

	.ui-progress-text {
		padding-top: 5px;
		font-size: 14px;
	}

	.ui-progress-line {
		width: 100%;
		position: absolute;
		top: 15px;
		z-index: -1;
	}

	.ui-line-item {
		position: absolute;
		top: 0;
		left: 0;
		height: 1px;
	}

	.deep-line {
		width: 100%;
		background-color: @finish-color;
	}

	.light-line {
		width: 100%;
		background-color: @wait-color;
	}
}

.ui-progress-vertical {

	.ui-progress-item {
		position: relative;
		padding-left: 23px;
		padding-bottom: 60px;
		border-left: 1px solid @finish-color;
	}

	.ui-progress-item.wait {
		border-left: 1px solid @wait-color;
	}

	.wait .ui-progress-icon {
		background-color: @wait-color;
	}

	.wait .ui-progress-done,
	.current .ui-progress-done {
		display: none;
	}

	.finish .ui-progress-doing {
		display: none;
	}

	.ui-progress-doing,
	.ui-progress-done {
		position: absolute;
		left: -9px;
		padding: 10px 0;
		background-color: #fff;
	}

	.ui-progress-done {
		left: -12px;
	}

	.ui-progress-done .iconfont {
		display: block;
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		background-color: @finish-color;
	}

	.ui-last-item,
	.ui-last-item.wait {
		border-left: none;
	}

	.ui-progress-icon {
		display: block;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background-color: @finish-color;
	}

	.ui-progress-text {
		padding-top: 6px;
		font-size: 16px;
	}

	.ui-progress-info {
		font-size: 14px;
		color: @wait-text-color;
	}
}