Индикатор выполнения с шагами

Я относительно новичок в программировании (начал изучать веб-разработку менее 3 месяцев назад), однако уже пытаюсь создать довольно сложный (по крайней мере для меня) индикатор выполнения.

Мне нужно, чтобы этот индикатор выполнения не только менял цвета, в то время как полоса автоматически перемещалась слева направо, как только загружалась страница — я видел объяснения по всему Интернету, как это сделать.

Однако, как только это будет сделано, мне нужно, чтобы цвета для каждой части (скажем, для каждых 10%) оставались прежними. Так, например, если первые 10% светло-красные, следующие 10% темно-красные и т. д., сначала они автоматически проходятся по мере анимации, но затем остаются статичными с разными цветами, которые все еще видны, а не только один последний. сплошной цвет.

Единственный способ, который я нашел, чтобы сделать это до сих пор, состоит в том, чтобы создать много разных баров, каждый из которых имеет свой z-индекс, однако я прекрасно понимаю, что это очень запутанный и, вероятно, не самый эффективный способ реализовать это.

Как я уже сказал, я новичок в этом, поэтому, пожалуйста, будьте осторожны :) Я покажу свой код ниже. Если у кого-то есть лучшее предложение, как я могу иметь разные цветоделения в одной и той же полосе, я бы хотел узнать что-то новое!

Спасибо!

HTML:

<div class = "meter">
<span id = "rd1" style = "width: 5%"><p></p></span>
<span id = "rd2" style = "width: 10%"><p></p></span>
<span id = "rd3" style = "width: 15%"><p></p></span>
<span id = "rd4" style = "width: 20%"><p></p></span>
<span id = "rd5" style = "width: 25%"><p></p></span>
<span id = "rd6" style = "width: 30%"><p></p></span>
<span id = "rd7" style = "width: 35%"><p></p></span>
<span id = "rd8" style = "width: 40%"><p></p></span>
<span id = "rd9" style = "width: 45%"><p></p></span>
<span id = "rd10" style = "width: 50%"><p></p></span>
<span id = "rd11" style = "width: 55%"><p></p></span>
<span id = "rd12" style = "width: 60%"><p></p></span>
<span id = "rd13" style = "width: 65%"><p></p></span>
<span id = "rd14" style = "width: 70%"><p></p></span>
<span id = "rd15" style = "width: 75%"><p></p></span>
<span id = "rd16" style = "width: 80%"><p></p></span>
<span id = "rd17" style = "width: 85%"><p></p></span>
<span id = "rd18" style = "width: 90%"><p></p></span>
<span id = "rd19" style = "width: 95%"><p></p></span>
<span id = "rd20" style = "width: 100%"><p></p></span>
</div>

CSS:

`@keyframes color{
0% {
background-color: hsl(315, 100%, 75%);
width: 5%;
}
5% {
background-color: hsl(315, 100%, 70%);
width: 10%;
}
10% {
background-color: hsl(315, 100%, 65%);
width:15%;
}
15% {
background-color: hsl(315, 100%, 60%);
width: 20%;
}
20% {
background-color: hsl(315, 100%, 55%);
width: 25%;
}
25% {
background-color: hsl(315, 100%, 50%);
width: 30%;
}
30% {
background-color: hsl(320, 100%, 50%);
width:35%;
}
35% {
background-color: hsl(325, 100%, 50%);
width: 40%;
}
40% {
background-color: hsl(330, 100%, 50%);
width: 45%;
}
45% {
background-color: hsl(335, 100%, 50%);
width: 50%;
}
50% {
background-color: hsl(340, 100%, 50%);
width:55%;
}
55% {
background-color: hsl(345, 100%, 50%);
width: 60%;
}
60% {
background-color: hsl(350, 100%, 50%);
width: 65%;
}
65% {
background-color: hsl(355, 100%, 50%);
width: 70%;
}
70% {
background-color: hsl(360, 100%, 50%);
width:75%;
}
75% {
background-color: hsl(360, 95%, 50%);
width: 80%;
}
80% {
background-color: hsl(360, 90%, 50%);
width: 85%;
}
85% {
background-color: hsl(360, 85%, 50%);
width: 90%;
}
90% {
background-color: hsl(360, 80%, 50%);
width:95%;
}
95% {
background-color: hsl(360, 75%, 50%);
width: 100%;
}
}

.meter { 
height: 20px; 
position: relative;
top: 100px;
background: grey;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px      rgba(255,255,255,0.3);
}
#rd1 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 75%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 4px;
overflow: hidden;
z-index: 20;
animation: color 4s linear 0s alternate;
}
#rd2 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 70%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 32px;
overflow: hidden;
z-index: 19;
animation: color 4s linear 0s alternate;
}
#rd3 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 65%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 60px;
overflow: hidden;
z-index: 18;
animation: color 4s linear 0s alternate;
}
#rd4 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 60%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 88px;
overflow: hidden;
z-index: 17;
animation: color 4s linear 0s alternate;
}
#rd5 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 55%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 116px;
overflow: hidden;
z-index: 16;
animation: color 4s linear 0s alternate;
}
#rd6 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(315, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 144px;
overflow: hidden;
z-index: 15;
animation: color 4s linear 0s alternate;
}
#rd7 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(320, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 172px;
overflow: hidden;
z-index: 14;
animation: color 4s linear 0s alternate;
}
#rd8 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(325, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 200px;
overflow: hidden;
z-index: 13;
animation: color 4s linear 0s alternate;
}
#rd9 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(330, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 228px;
overflow: hidden;
z-index: 12;
animation: color 4s linear 0s alternate;
}
#rd10 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(335, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 256px;
overflow: hidden;
z-index: 11;
animation: color 4s linear 0s alternate;
}

#rd11 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(340, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 284px;
overflow: hidden;
z-index: 10;
animation: color 4s linear 0s alternate;
}

#rd12 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(345, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 312px;
overflow: hidden;
z-index: 9;
animation: color 4s linear 0s alternate;
}
#rd13 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(350, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 340px;
overflow: hidden;
z-index: 8;
animation: color 4s linear 0s alternate;
}
#rd14 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(355, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 368px;
overflow: hidden;
z-index: 7;
animation: color 4s linear 0s alternate;
}
#rd15 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(360, 100%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 396px;
overflow: hidden;
z-index: 6;
animation: color 4s linear 0s alternate;
}
#rd16 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(360, 95%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 424px;
overflow: hidden;
z-index: 5;
animation: color 4s linear 0s alternate;
}
#rd17 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(360, 90%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 452px;
overflow: hidden;
z-index: 4;
animation: color 4s linear 0s alternate;
}
#rd18 {
display: block;
height: 140%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(360, 85%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 480px;
overflow: hidden;
z-index: 3;
animation: color 4s linear 0s alternate;
}
#rd19 {
display: block;
height: 140%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:  hsl(360, 80%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 508px;
overflow: hidden;
z-index: 2;
animation: color 4s linear 0s alternate;
}
#rd20 {
display: block;
height: 140%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: hsl(360, 75%, 50%);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow: 
inset 0 0px 0px  rgba(255,255,255,0.1),
inset 0 -6px 6px rgba(0,0,0,0.4);
position: relative;
bottom: 536px;
overflow: hidden;
z-index: 1;
animation: color 4s linear 0s alternate;
}
@-webkit-keyframes move {
    0% {background-position: 0px 0px, 0 0, 0 0}
    100% {background-position: -100px 0px, 0 0, 0 0}
}