How do I change loading bar background without reverting to default setting?

Question

First off this is the code I am using on the HTML and CSS sides:

progress {
  color-scheme: light dark;
  accent-color: RGBA(30, 170, 255, 1);
}

<p> Progress in life goals (5%)
  <progress id="progressbar1" value="5" max="100"></progress>
</p>

For my problem, the scheme setting changes nothing and the accent only affects the loading progress color.

My loading bar currently looks round with a blue progress bar and black background when what I want is a light grey background, but when I try to specify a background color the bar changes to green with a grey background and rectangular shape even when I try something else like a blue background. How do I fix this? Both CSS and HTML code check out as valid according to W3.org. I am using the Microsoft Edge browser to test my code currently, while I would like whatever solution works to function on most browsers I do not care if it works on Internet Explorer.

For example this: Insufficient version vs this: Unwanted version

I have tried using different backgrounds in the CSS file, adding transparency, changing the color scheme property, defining the loading bar shape, and using internal style tags instead of an external file for the CSS code.

ProfessorMoreRight · Answer 1 · 2023-03-25T08:22:05.280

0

I found a solution in the code from a related question that did not initially come up:

 filter: alpha(opacity=60);
   opacity: 0.6;

All I need to do is add the code in and use a darker shade of blue to compensate. See: How do I reduce the opacity of an element's background using CSS?

edited Mar 25 '23 at 08:22

answered Mar 25 '23 at 08:20

ProfessorMoreRight

3
4

score 0 · Accepted Answer · edited Jul 26 '23 at 09:07

In the below example, I have shared the code with an explanation. So you can style progress elements in different browsers.

progress {
  /* style rules */
  background-color: pink;
  /* chrome, edge, opera, safari apply "webkit" stylesheet for progress bar*/
  -webkit-appearance: none;
  accent-color: orangered;
  /* sep 2021 - mar 2022 */
  height: 20px;
  border-radius: 10px;
}

progress::-webkit-progress-bar {
  /* style rules background in chrome, edge, opera */
  background-color: pink;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  /* style rules chrome edge opera value bar colour */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}

progress::-moz-progress-bar {
  /* style rules ff equivalent to ::-webkit-progress-value */
  background-color: orangered;
  border-radius: 10px;
  transition: width 0.4s ease-in;
}

<p> Progress in life goals (5%)
  <progress id="progressbar1" value="5" max="100"></progress>
</p>

How do I change loading bar background without reverting to default setting?

2 Answers2