Progress bar with steps - html

Question

I am relatively new to programming (starting learning web dev less than 3 months ago), however already attempting to create a pretty complex (at least to me) progress bar.
I need this progress bar to not only change colors while the bar automatically moves from left to right as soon as the page loads - I've seen explanations all over the internet on how to do those.
However, once it is done, I need the colors for each portion (say, each 10%) to remain the same. So for example if the first 10% are a light red, the next 10% a darker red, etc... it first automatically goes through them as it animates, but then remains static with the different colors still seen and not just one last solid color.
The only way that I have found to do this so far is to create many different bars, each having a different z-index, however I am well aware this is very convoluted and probably not the most efficient way to implement this.
Like I said I am new to this so please be gentle :) I will show my code beneath. If anyone has a better suggestion, how I can have the different color separations within the same bar I would love to learn something new!
Thanks!
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}
}