Styling progress bar by using CSS - html

Question

I want to make progress bar look like the image below by using CSS. How can i do for it?
what i expected
I try to do it already. What i have got is this.
what i have done
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background-color: whitesmoke;
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}
<section class="prog">
<p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>

Answer 1

You can add stripes in background.
Using linear gradient and % restricting #ececec color to 1.5% width and add white color as a fill up color.
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background: linear-gradient(
to right,
white 10%,
#ececec 11% 11.5%,
white 11.5% 20%,
#ececec 20% 21.5%,
white 21.5% 30%,
#ececec 31% 31.5%,
white 31.5% 40%,
#ececec 41% 41.5%,
white 41.5% 50%,
#ececec 51% 51.5%,
white 51.5% 60%,
#ececec 60% 51.5%,
white 61.5% 70%,
#ececec 70% 71.5%,
white 71.5% 80%,
#ececec 80% 81.5%,
white 81.5% 90%,
#ececec 90% 91.5%,
white 10%
);
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}
<section class="prog">
<p>Progress of today's class
<progress value="2" max="5"></progress>
</p>
</section>
UPDATE:
As #Afif mentioned repeating-linear-gradient(), this method is a more concise & compact way to do the same thing as above. It is also supported in almost every browser.
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background: repeating-linear-gradient(90Deg, white, white 9%, #ececec 10%);
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}
<section class="prog">
<p>Progress of today's class
<progress value="2" max="5"></progress>
</p>
</section>

Answer 2

::-webkit-progress-bar is non-standard and not recommended for production websites.
Ignoring that, the method of #Ahmed Ali suggested is correct, or you can also use a repeated background image to show your expected result.
To illustrate, I took a random vertical line from the internet, so in your case, you'll need to create a line of the color you want.
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background-color: whitesmoke;
background-image: url('https://www.researchgate.net/profile/Kyriaki-Mikellidou/publication/264201750/figure/fig2/AS:288776888434689#1445861183969/The-vertical-horizontal-illusion-Although-of-equal-lengths-the-vertical-line-looks.png');
background-size: 20px;
background-repeat: repeat;
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}
<section class="prog">
<p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>