Custom styling progress bar in CSS
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.
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.
1 Answer 1
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 */ >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 */ >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 */ >Determinate:
Indeterminate:
Html progressbar изменить цвет
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Тег является индикатором хода выполнения задачи. Например, загрузки файла или процента проголосовавших к определенному времени.
Атрибуты тега
Должно выполняться неравенство:
Числовое значение value можно менять с помощью JavaScript.
Внешний вид элемента зависит от операционной системы и браузера.
.default-progressbar progress Выполнено 0% работы Браузеры, не отображающие тег выводят текст из контейнера .
CSS-стили элемента можно изменять. Для этого сначала надо отменить стили браузеров по умолчанию.
Изменение цвета фона элемента
/* Firefox */ progress < background: #fac; >/* Chrome */ progress::-webkit-progress-bar
Изменение цвета значения элемента
Opera 11 и 12 не допускает изменение цвета индикатора – он остается зеленым.
/* IE10 */ progress < color: #e0a; >/* Firefox */ progress::-moz-progress-bar < background: #e0a; >/* Chrome */ progress::-webkit-progress-value
Градиент в качестве значения
Для Internet Explorer цвет значения задается свойством color, т.е. никакого градиента для IE не получится 🙁
.gradient-progressbar progress < appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; margin-top: 10px; background: #eee; border: 0; width: 100%; height: 25px; border-radius: 9px; color: #9c3; >.gradient-progressbar progress::-webkit-progress-bar < background: #eeeeee; border-radius: 9px; >.gradient-progressbar progress::-webkit-progress-value < background: linear-gradient(to bottom, #cf9 0%, #9c3 100%); border-radius: 9px; >.gradient-progressbar progress::-moz-progress-bar Выполнено 50% работы How to change the color of HTML5 progress bar
you can achieve what you need by using css rules, the only important thing that you have to keep in mind while styling your progress bar is that putting them all together in one selector breaks every browser on the planet (including the polyfilled ones), so you have to write three separate rules with the same CSS properties in them.
First of all lets reset the css rule for the progress bar :
progress, /* All HTML5 progress enabled browsers */ < /* Turns off styling - not usually needed, but good to know. */ appearance: none; -moz-appearance: none; -webkit-appearance: none; >The following rules are the basic selector for the most used browser. By changing the background-color (color in IE) you can change the bar color as you wish:
/* IE10 */ progress < color: black; >/* Firefox */ progress::-moz-progress-bar < background: black; >/* Chrome */ progress::-webkit-progress-value
The next thing to do is to change the color on a given value, for this you can use a selector constructed with progress + [value=»value_to_style»] . In the following example i’ve used a particular rules [value^=»9″] to apply the red color to the bar for all the value that start with 9 (91,92,93. ):
progress[value^="9"]::-moz-progress-bar
if you need to show a special color if value is > max simpy use the above rules where style to put a special background-color.
You can see a working example of how the style can be applied in this jsFiddle
How can I set the color for the progress element?
Is it possible to set the color of the «bar» for the
7 Answers 7
You can style the color of the bar in the element by changing the background of a few browser-proprietary selectors.
In Firefox, you can use the following:
In Chrome or Safari, you can use:
progress::-webkit-progress-value
In IE10, you just need to use the color attribute:
progress::-moz-progress-bar < background: blue; >progress::-webkit-progress-value < background: blue; >progress
If the progress element had an id of ‘myprogressbar’, then how would you do the Chrome one? #myprogressbar<-webkit-progress-value> does not appear to work.
@nullability sorry for the bump, but I tried what you suggested (in regards to attaching it to a class) and it didn’t work, could you please show me an example through JSFiddle? Not sure what to Google to find out how to do it.
This works too. EX: IF you have the latest chrome installed.
Blink / Chrome
background-color
To color the background-color of a progress element (the part that does not increase/decrease) in WebKit browsers use the following:
progress::-webkit-progress-bar
To color the effective color of the moving part of a progress element use the following:
progress::-webkit-progress-value
Gecko / Firefox
background-color
To color the background-color of a progress element (the part that does not increase/decrease) in Gecko browsers use the following:
To color the effective color of the moving part of a progress element use the following:
Presto / Opera
I’ve unofficially dropped support for Opera since they’ve stopped developing it. For those confused and think Opera is still being developed — that is just an obviously rebranded copy of Chrome. Do not test browsers, test engines!
Trident / Internet Explorer (and «Edge»)
When Microsoft actually makes the effort they really do actually come through, this one actually makes perfect straight-forward sense.
background-color
WebKit / Safari
At some point WebKit/Safari stopped working with Chrome (or vice-versa); this is tested on Safari 14.0.3 as of 2021-03-13.
background-color
progress[value]::-webkit-progress-bar
progress[value] progress[value]::-webkit-progress-value
Putting it all together, that makes:
/* background: */ progress::-webkit-progress-bar progress /* value: */ progress::-webkit-progress-value progress::-moz-progress-bar progress
Each browser seems to handle progress bar styling differently at the moment, and therefore you need to style it like this:
progress < /* style rules */ >progress::-webkit-progress-bar < /* style rules */ >progress::-webkit-progress-value < /* style rules */ >progress::-moz-progress-bar < /* style rules */ >WebKit styles for Chrome and Safari and moz styles for Firefox.
From here you can simply add a background colour with background-color .
Good Luck! Any queries, drop me a comment below.
The preferred method going forward for modern browsers is accent-color .
It seems that Chrome has already dropped support for its -webkit-progress psuedo-selectors, and Firefox’s implementation is buggy and likely to be dropped as well. accent-color is supported by Firefox, Chrome and Safari, and is currently the only method with specifications, although they’re still in drafting.
Note: Chrome (and by extension, Edge) currently automatically switches the background color from white to dark grey, depending on how bright the accent color is.