Styling progress bar by using CSS-CodePudding

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 >
  <p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>

CodePudding user response：

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 >   
  <p>Progress of today's class 
   <progress value="2" max="5"></progress>
  </p>
</section>

CodePudding user response：

::-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 >
  <p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>