渐变色能量条-优快云博客

本文链接：https://blog.youkuaiyun.com/woaidouya123/article/details/109498775

渐变色分段能量条效果如下图：

实现思路：

整根进度条采用渐变色背景；左边起每个小方框设置背景为透明，边框为白色；右边设置一个div白色背景占满空白

CSS样式：

.container{
	width: 300px;
	background-image:linear-gradient(to right, #23be7b, #fff);
	border: 1px solid #23be7b;
	display: flex;
	justify-content: flex-start;
	position: relative;
	height: 1em;
}
.container .smallbar{
	height: 1em;
	width: 3.33%;/*根据需要展示方块数调整*/
	box-sizing: border-box;
	border:1px solid white;
	background-color: transparent;
}
.container .hidebar{
	background-color: white;
	height: 1em;
	flex: 1;
}
.container .percent-text{
	position: absolute;
	right: 10px;
	color: #23be7b;
	top: 0px;
	height: 1em;
	line-height: 1em;
}

HTML页面布局：

<!DOCTYPE html>
<html>
<head>
	<title>能量条</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="container">
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="smallbar"></div>
		<div class="hidebar"></div>
		<div class="percent-text">
			50%
		</div>
	</div>
</body>
</html>

完整代码见：github