12

I have a progress bar and i want to style it away from default.

I tried bit of things but it didn't work as I expected.

I want to change the background color and border radius of the progress bar.

When I set the background color, it changes from the default blue to green color and not to the color I set.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

You can see the fiddle.

When i set the background-color the color changes from blue to green which has to change to a different blue.

And i want the progress bar to have a smooth edge.

I did set border-radius but this also didn't work out.

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}
1
25

You have to work with the kit of HTML5 progress bar.These are currently the entire selectors for styling HTML5 progress bar:

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

so :

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}
<progress value="3333" max="10000">33%</progress>

One thing to keep in mind is that there are two types of progress bars: indeterminate and determinate. If you use the above you will be changing the style for both. If you only want to change the style for a determinate bar you can do the below. This is useful if you want to style the indeterminate progress bar different, for example with a rounded spinner or anything like that.

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }
<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>

2
  • 4
    How do you change the color green? Sep 21, 2018 at 1:01
  • progress[value]::-webkit-progress-value { background-color: your-color-choice; }
    – BrunoElo
    Apr 11, 2021 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.