极客观点
项目管理
HarmonyOS
1.遇到了这么个进度条，如下图：
这该怎么写呀？实在是水平有限，不知该怎么做，在此求助大神们，谢过了。
自己按着自己理解写了下，通过遮挡方式来写，但是还是达不到理想的效果，我试了下两种写法，但是还是不行，望大神们能够指点迷津，以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>进度条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin:0; padding: 0;}
ul{list-style:none;}
.progress{width: 100%;}
.progress .pro_txt{width: 280px; margin:0 auto; height: 22px; overflow:hidden;}
.progress .txt{font-size: 11px; color: #212121; margin-right: 40px; display: block; float: left;}
.progress .txt:last-child{margin-right:0;}
/*1*/
.bar{ position: relative; margin:0 auto; height: 10px; width: 262px; overflow:hidden;}
.pro_line1{overflow:hidden; position: absolute;top: 0; left: 0; z-index: 1; height: 10px;}
.pro_line1 .disc1{display: block; width: 10px; height: 10px; border-radius: 50%; background: #d2d2d2; float: left;}
.pro_line1 .line{display:block; width:53px; height: 2px; background: #d2d2d2; float: left; margin: 4px 0;}
.pro_line1.on{z-index: 2; width: 25%}
.pro_line1.on .disc1{background: #fcd058;}
.pro_line1.on .line{background: #fcd058;}
/*2*/
.progress .pro_bar{width: 262px; margin:0 auto; position: relative;}
.progress .box{width: 100%; height: 10px; position: absolute; top: 0; left: 0; overflow:hidden;}
.progress .box.on{width: 23%;}
.box .line1{width:100%; height: 2px; background: #d2d2d2; position: absolute; top: 50%; margin-top:-1px;}
.box.on .line1{ background: #fcd058;}
.box .disc_box{position: absolute; top: 0; left: 0; width:100%; height: 10px;}
.box .disc{display: block; width: 10px; height: 10px; border-radius: 50%; background: #d2d2d2; float: left; margin-right: 53px;}
.box.on .disc{background: #fcd058;}
.box .disc:last-child{margin-right:-2px;}
</style>
</head>
<body>
<!-- 第1种写法 -->
<div class="progress" style="margin:20px 0;">
<div class="pro_txt">
<span class="txt">铜牌</span>
<span class="txt">银牌</span>
<span class="txt">金牌</span>
<span class="txt">钻石</span>
<span class="txt">股东</span>
</div>
<div class="bar">
<div class="pro_line1">
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
</div>
<div class="pro_line1 on">
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
<span class="line"></span>
<span class="disc1"></span>
</div>
</div>
</div>
<!-- 第2种写法 -->
<div class="progress">
<div class="pro_txt">
<span class="txt">铜牌</span>
<span class="txt">银牌</span>
<span class="txt">金牌</span>
<span class="txt">钻石</span>
<span class="txt">股东</span>
</div>
<div class="pro_bar">
<div class="box">
<div class="line1"></div>
<div class="disc_box">
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
</div>
</div>
<div class="box on">
<div class="line1"></div>
<div class="disc_box">
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
<span class="disc"></span>
</div>
</div>
</div>
</div>
</body>
</html>按照这么多的评论，自己重新想了下，通过用两张图片遮挡的方式实现了，以下是修改的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>进度条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin:0; padding: 0;}
ul{list-style:none;}
.progress{width: 100%;}
.progress .pro_txt{width: 305px; height: 22px; overflow:hidden; margin:0 auto;}
.progress .txt{font-size: 11px; color: #212121; margin-right: 30px; display: block; float: left;}
.progress .txt:last-child{margin-right:0;}
.img_box{position: relative; width: 295px; margin:0 auto;}
.imgline{width:100%; height:11px; position: absolute; top: 0; left: 0; background:url(./image/pro2.png) no-repeat;}
.imgline.on{background:url(./image/pro3.png) no-repeat; width: 23%}
</style>
</head>
<body>
<!-- 第3种写法 -->
<div class="progress" style="margin:20px 0;">
<div class="pro_txt">
<span class="txt">会员</span>
<span class="txt">铜牌</span>
<span class="txt">银牌</span>
<span class="txt">金牌</span>
<span class="txt">钻石</span>
<span class="txt">股东</span>
</div>
<div class="img_box">
<div class="imgline"></div>
<div class="imgline on"></div>
</div>
</div>
</body>
</html>还有自己思考了下，我之前用纯css写的第二种方法，就是直线可以随百分之正常实现，但是圆点不正常实现，想了下可以这么实现，就是圆点的话就用js判断，比如第一个圆点超过多少百分之几的话就让它变黄色，后面几个圆点也是如此。
html5
想的简单一点。
可以进度条外框其实是一个png的透明图片，透明部分为中间灰色或是黄色部分，然后通过js计算其中的黄色部分的宽度和位置。