进度条实现思路收集

要实现一个分段的进度条,主要比较麻烦的是数值在进度条上面对应的位置:效果图如下.

请问有什么好的实现思路吗?

<div class="wrapper"> 
  2 kinds of sectionalized color bars
  <div class="bar bar1"></div> 
  <div class="bar bar2"></div>  
</div>



$red1: #FF7473;
$yellow1: #FFC952;
$blue1: #47B8E0;
$purple1: #7451DF;
$brown1: #5E553E;

.wrapper {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  
}

.bar {
  width: 100%;
  height: 60px;
  margin-top:10px;
  

}

.bar {  width: 100%;  height: 8rpx;  margin-top:10px;}.bar1 {  background-image:      linear-gradient(          to right,          #007EFA,          #007EFA 25%,          #11C178 25%,          #11C178 50%,          #FEAA08 50%,          #FEAA08 75%,          #FE5850 75%,          #FE5850 100%,          );}

.bar2 {
  background-repeat: no-repeat;
	background-size: 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%;
	background-image:
    linear-gradient($red1,$red1),
    linear-gradient($yellow1, $yellow1),
    linear-gradient($blue1, $blue1),
    linear-gradient($purple1, $purple1),
    linear-gradient($brown1, $brown1);
}

参考链接:www.jianshu.com/p/4a222155a…

请忽略这里的文字:

慧庆寺距阊门四五里而遥，地僻而鲜居人，其西南及北，皆为平野。岁癸未、甲申间，秀水朱竹垞先生赁僧房数间，著书于此。先生旧太史，有名声，又为巡抚宋公重客，宋公时时造焉。于是苏之人士以大府重客故，载酒来访者不绝，而慧庆玉兰之名，一时大著。