Enhancing progress bar appearance with CSS styling

Question

Enhancing progress bar appearance with CSS styling

Is there a way to style a progress bar using CSS to make it look like the image below? View expected design

I have already attempted to achieve this but ended up with a different result. See what I have done so far

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>

html css

Answer 1

Answer №1

You have the option to incorporate stripes into the background.
Utilize linear gradient and restrict the #ececec color to a width of 1.5% by using percentages, while adding white 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 mentioned by @Afif, utilizing repeating-linear-gradient() is a more concise and compact method to achieve the same effect as above. This approach is also supported in nearly 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

You have the option to incorporate stripes into the background.
Utilize linear gradient and restrict the #ececec color to a width of 1.5% by using percentages, while adding white 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 mentioned by @Afif, utilizing repeating-linear-gradient() is a more concise and compact method to achieve the same effect as above. This approach is also supported in nearly 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 3

Answer №2

::-webkit-progress-bar is considered as not standard and is not recommended for use on production websites.

However, the approach suggested by @Ahmed Ali is accurate, or you can alternatively utilize a repeated background image to achieve your desired outcome.

For example, I selected a random vertical line from the internet, but in your scenario, you would need to create a line using the color of your choice.

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>

Answer 4

::-webkit-progress-bar is considered as not standard and is not recommended for use on production websites.

However, the approach suggested by @Ahmed Ali is accurate, or you can alternatively utilize a repeated background image to achieve your desired outcome.

For example, I selected a random vertical line from the internet, but in your scenario, you would need to create a line using the color of your choice.

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>

Enhancing progress bar appearance with CSS styling

Answer №1

Answer №2

Similar questions

Scripted AngularJS directive

.htacces Disables Styling on Page

Creating an image overlay within HTML text in NSAttributedString with CSS: A step-by-step guide

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

I am encountering a continuous css ParserError while trying to compile my react project

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

Can a CSS class be designed to have a value that changes dynamically?

The background failed to display (potentially due to a hovering function)

What can I do to prevent an anchor link from automatically scrolling to a different section of the page?

Expanding sidebar height to match parent using Flexbox

How to Remove a CSS Class from an <li> Tag in ASP.net Using Code Behind

Dealing with Overflow Issues in Divs

Prevent fixed div from overlapping with footer

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Struggling with aligning text in the center of a Navbar using Bootstrap4

Tips for automatically displaying the first option as selected in an HTML Select dropdown

A guide to implementing drag and drop functionality using JavaScript

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Utilizing grid for JavaScript positioning on the website:

Verify the presence of a specific select option using text in jQuery version 1.7