Custom styling progress bar in CSS

Question

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; }

Possible duplicate of How to change the color of HTML5 progress bar — caramba
– caramba, Commented Feb 17, 2017 at 6:28
You could save yourself the headache of sudo classes for different browsers and just use a couple of divs instead: stackoverflow.com/questions/42290719/… — Rooster242
– Rooster242, Commented Dec 24, 2024 at 21:59

Dai · Accepted Answer · 2020-08-08 02:32:03Z

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>

progress[value]::-webkit-progress-value { background-color: your-color-choice; }
One important thing to note, is that browsers ignore rules they do not recognise, so keep the declarations for different browsers separate.
In order for this to work in Safari, I had to use -webkit-appearance: none; as was suggested in the question mentioned in caramba's comment.

Abrar · Accepted Answer · 2024-04-27 08:18:26Z

Note: when you first implement just progress, you might see that weird green grey progress bar but if you implement

progress::-webkit-progress-bar

and

progress::-webkit-progress-value

you will see that the things are starting to work as expected

progress { accent-color:red; background-color:tomato;//mozilla //Get rid of website stylesheet //Weird green grey progressbar -webkit-appearence:none; } //Set the background color for progress progress::-webkit-progress-bar {background-color:tomato;} // set the progress value color progress::-webkit-progress-value {background-color:red;} //set the progress value color for FF progress::-moz-progress-bar {background-color:red;}

Collectives™ on Stack Overflow

Custom styling progress bar in CSS

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related