Question 43523 in Html Question posted in
Some basic documentation can be found here.

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

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);
    }
 <!DOCTYPE html>
    <html lang = en>
    <head>
         <meta charset = UTF-8>
         <title>About Me</title>
    <link rel="stylesheet" href="site.css">
    </head>
    <body>
    <p> Progress in life goals (5%) 
    <progress id="progressbar1" value="5" max="100"></progress>
    </p> 
    </body>
    </html>

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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?


  2. 0

    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;
}
    <!DOCTYPE html>
    <html lang = en>
    <head>
         <meta charset = UTF-8>
         <title>About Me</title>
    <link rel="stylesheet" href="site.css">
    </head>
    <body>
    <p> Progress in life goals (5%) 
    <progress id="progressbar1" value="5" max="100"></progress>
    </p> 
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search